Image Sequence is a powerful and complex feature that allows you to use a video, convert it to frames, and animate the progress of frames using Motion.page. Whether it is on scroll, page load, or any other trigger.
We have integrated the video transcoder, which will transcode the video into frames that are ready for use in Image Sequence, so all you need to use this feature is a short video clip.
The transcoder runs in the browser, and uploads images to /wp-content/uploads/sequence/ after it's finished. You can delete any sequence directly from Motion.page by hovering its thumbnail and clicking a removal icon.
Once you first open the Image Sequence property, you will see a notice informing you that you need to target our shortcode [mp-canvas] or the <canvas> (ideally with a class or ID) element.
Go to your page builder, and place either an empty <canvas> element to the position where you want to display the sequence, if your builder allows that, or use a shortcode [mp-canvas] which renders the canvas element for you.
You may need to set the size and position of the element in the page builder, depending on how and where you want to display it.
Once you have a canvas on your page and open the Image Sequence property, it will suggest a selector of your canvas. Just click it to add to your animation.
After the correct selector is set, you will see the whole settings of the Image Sequence.
You can choose to transcode the video file, or manually upload a batch of images if you prefer that (you can also use PNG images, for some neat transparent overlay sequences, but be careful with the size of the images).
Transcoding
Note: Transcoder currently only works in Chromium browsers, with a valid SSL certificate on the site.
Clicking the [transcode] button opens the uploader window, where you can choose the video file from your computer. It will open up a modal showing a preview of the video, and basic information about the source file like the original dimensions, FPS (frames per second), length, and the final number of frames that would get uploaded after the successful transcoding.
You can tweak the settings like size, FPS, and quality (compression).
After clicking the [Transcode to images] button, the transcoding process will start locally and upload images to your site after it's transcoded.
Once uploaded, the modal closes itself, and you should already see the sequence loaded in the canvas.
Let's have a closer look at all the settings we have.
Manual upload
If you already have your images ready for the sequence, you can manually upload them.
We try to detect the naming convention of the files, so whether you name them 1.jpg, 2.jpg, 3.jpg, ..., or 0001.jpg, 0002.jpg, 0003.jpg, it should work as long as they are selected in the correct order.
Features
Range of frames - You can use only part of your sequence for the current animation. It's useful if you want to crop the video, or chain more triggers, so one animation would run only for the first 100 frames, and the second one for the rest (as an example).
Image fit - Works the same way as object-fit in CSS. You can choose how your images fit and resize them relative to the canvas size.
Skip every x frame - As the name suggests, it skips and won't output every X'th frame
Disable on - You can choose one or multiple conditions like a browser or a device, in which the fallback method outputs instead of a full image sequence.
Fallback method - Choose your preferred fallback method. The fallback method kicks in if:
- If the breakpoint settings do not match
- If the "Disabled on" condition is matched
- If the "prefers-reduced-motion" is enabled and not bypassed
Note: Fallback only happens in the front end, not in Motion.page
Disable timeline on fallback - Disables the whole timeline, including other nodes, if the fallback method is met
Lazy load images - Great feature for performance, if the sequence is placed below the fold. It uses an intersection observer, and after enabling it, you can set the percentage of top offset from the element which determines when it should start downloading the images.
Reverse - Play the sequence in the opposite direction (from the last frame to the first frame)