GSAP Extensions How to Add Image Animation in Bricks Builder Using BricksFly Estimated reading: 6 minutes 130 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 Make sure you have installed: Bricks Theme BricksFly Pro Activate Image Animation In BricksFly Go to your WordPress Dashboard. Click on BricksFly. Head to the Elements tab. 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.
