GSAP Extensions Image Animation Estimated reading: 6 minutes 18 views Image animations apply scroll-based motion effects that enhance the visual rhythm of your layout. By adjusting timing, scaling, and directional movement, you can create smooth transitions that respond to user interaction. Requirement Elementor (Page Builder) Animations Addons (Our Plugin) Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. How To Activate Image Animation Go to your WordPress Dashboard. Click on Animation Addons. Head to the Extension tab. Under ScrollSmoother, toggle on Image Animation. Step 1: Set the Reveal Animation To begin, select the element where you want to apply the image animation on your site. Once you select the element, you’ll see four options: None, Reveal, Scale, and Stretch. Let’s explore one by one. Animation Choosing ‘None’ means no animation will be applied. Select ‘Reveal’ to get started. Enable On Editor Next, you’ll notice the ‘Enable’ setting. Without enabling the ‘Enable‘ button, you won’t be able to preview your element’s animation directly in the “Enable On Editor”. If you set it to “Yes”, the animation will play in the editor just like it does on the live page. However, if you keep it “Off”, the element will remain static in the editor. This does not disable or remove the animation from the live site. In short, this option gives you a quick idea of how your elements will animate on the front end. Play Animation In the Play Animation section, you can click ‘Play Now’ to see how the image animation looks right away. Animation To The “Animation To” settings let you choose the direction in which your image will animate on the website. You can pick from Left, Right, Top, or Bottom. Left – Slides in from the left. Right – Slides in from the right. Top – Slides in from the top. Bottom – Slides in from the bottom. Example: I selected Right, but choose the direction that fits your design. Animation Start Top Top: Starts when the top of the image aligns with the top of the screen. Top Center: Starts when the top reaches the center. Top Bottom: Triggers earlier—when the top hits the bottom of the screen. Center Top: Starts when the center hits the top. Center Center: Triggers when the image center reaches the screen center. Bottom Top: Starts when the bottom of the image reaches the top of the screen. Bottom Center: Triggers when the bottom hits the screen center. Bottom Bottom: Begins when the image bottom aligns with the bottom of the screen. Custom: Set your own scroll values. For example, I used 150% for the top, but you can use any value that works for you. Out of all the options, I chose ‘Top Bottom,’ but you can select whichever one works best for you. Data Ease Power2.out: Starts fast and slows down. Bounce: Ends with a bouncing motion. Back: Slightly overshoots and settles back. Elastic: Stretches and snaps back with force. Slowmo: Slows in the middle. Stepped: Moves in distinct steps. Sine: Smooth like a wave. Expo: Starts fast and ends sharply. Out of all the options, I chose ‘Bounce’, but you can pick whichever works best for you. Final Output Of Reveal Step 2: Set the Scale Animation The Scale animation smoothly adjusts the size of your image as users scroll. Animation Choosing ‘Scale’ gives you a different animation effect compared to ‘Reveal,’ both in behavior and function. Enable On Editor Switch “Enable” to “Yes” to preview the animation directly in the editor. Play Animation Click Play Now to see how the scale effect behaves. Start Scale Defines the starting size: 0: Starts invisible and grows. 0.5: Starts at half size. 1: Starts at full size. Example: I used 0.5, but you can set any value based on your preference. End Scale The End Scale function determines how large or small the image will be after the animation is complete. For example, I set the End Scale to 1. Note: You can choose any value you like, but keep in mind—higher values will make your image appear much larger. Animation Start (Same options as in Reveal Animation) Top Top: Starts when the top of the image aligns with the top of the screen. Top Center: Starts when the top reaches the center. Top Bottom: Triggers earlier—when the top hits the bottom of the screen. Center Top: Starts when the center hits the top. Center Center: Triggers when the image center reaches the screen center. Bottom Top: Starts when the bottom of the image reaches the top of the screen. Bottom Center: Triggers when the bottom hits the screen center. Bottom Bottom: Begins when the image bottom aligns with the bottom of the screen. Custom: Set your own scroll values. For example, I used 150% for the top, but you can use any value that works for you. Example: I chose Top Bottom, but feel free to experiment. Final Output Of Scale Step 3: Set the Stretch Animation Stretch animation adds a dynamic movement to your image. It’s designed to catch the eye with a simple yet effective motion. Animation Choose Stretch from the animation options. Enable On Editor Toggle “Yes” to preview the animation inside the editor. When “Off”, the animation won’t appear in the editor, but will still work live. Play Animation In the Play Animation section, you can click ‘Play Now’ to see how the image animation looks right away. Final Output Of Stretch You Did It Congrats, you’ve set up the image animations and added movement that makes your website more engaging. By using reveal, scale, and stretch effects, you can control how images move as visitors scroll. Try adjusting the timing and direction to match your style and create smooth, eye-catching effects. In addition, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.
