How to Add Image Animation in Bricks Builder Using BricksFly

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 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Image Animation In BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Elements tab. 
4. Under GSAP Extension ➔ Scroll Smoother, 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.

Animation To

“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.

In this example, we 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: Lets you set custom scroll values based on your design needs.

Out of all the options, we chose ‘Top Center,’ 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, we chose ‘Slowmo’, but you can pick whichever works best for you.

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.

Final Output Of Reveal

Step 2: Set the Scale Animation

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.

Start Scale

Defines the starting size:

• 0: Starts invisible and grows.
• 0.5: Starts at half size.
• 1: Starts at full size.

In this example, we used 0.5, but you can set any value based on your preference.

End Scale

End Scale function determines how large or small the image will be after the animation is complete.

In this example, End Scale value is set 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: Lets you set custom scroll values based on your preference.

In this example, we chose Top Bottom, but feel free to experiment.

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.

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.

To apply the stretching effect properly, select a slightly larger image, then go to the Layout settings and set the width to 40% and the height to 100vh.

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.