In this video, I show you how to implement an image sequence using Motion Page in their Elementor project. I explain the importance of having a canvas in Elementor and how to use shortcodes to include Motion Page in Elementor. I demonstrate how to create a new timeline, select the page to implement the image sequence, and set triggers for the animation. I also discuss how to transcode a video or upload images to create an image sequence and how to use CSS to increase the size of the canvas for better animation quality. I recommend keeping the image aspect ratio in mind when using image fill or image contained. The tutorial ends with a demonstration of the completed animation.
#mp-sequence-1 {
width: 100vw;
height: 100vh;
}
Timeline:
00:00 – Introduction
01:32 – MP Instructions
02:03 – Shortcode Addition
04:04 – MP Timeline Setup
05:23 – Image Sequence Addition
09:05 – Sequence Playback
09:50 – Canvas Size Adjustment
12:29 – Dimensional Challenges
_________
Motion: https://linke.to/mp
_____
Learn how to design with elementor flexbox containers:
https://linke.to/ZcEi
_____
Follow me on social
Instagram: https://www.instagram.com/obstudios.io/
Facebook: https://www.facebook.com/obstudios.io
_____
Tool I love
Elementor: https://elementor.com/pricing-plugin/
Oohboi Steroids for Elementor: https://wordpress.org/plugins/ooohboi…
Local Development: https://localwp.com/