{"id":563,"date":"2026-08-17T04:06:54","date_gmt":"2026-08-17T04:06:54","guid":{"rendered":"https:\/\/bricksfly.com\/blog\/?p=563"},"modified":"2026-08-17T04:06:55","modified_gmt":"2026-08-17T04:06:55","slug":"bricks-image-animation","status":"publish","type":"post","link":"https:\/\/bricksfly.com\/blog\/bricks-image-animation\/","title":{"rendered":"How to Create Image Animation in Bricks Builder using BricksFly"},"content":{"rendered":"\n

Images can do more than sit still on a page. With the right animation, they can guide attention, add depth, highlight important content, and make a Bricks Builder website feel far more interactive.<\/p>\n\n\n\n

With BricksFly<\/a> you can create image animations directly inside your Bricks workflow without relying on custom JavaScript for every effect. From smooth reveals and parallax movement to scroll-based transitions, BricksFly gives you more control over how images enter and behave on the page.<\/p>\n\n\n\n

In this guide, you\u2019ll learn how to create image animation in Bricks Builder step by step and fine-tune the effect for a polished, responsive result.<\/p>\n\n\n\n

\n \n Quick Answer\n <\/strong>\n\n

\n To create image animation in Bricks Builder<\/strong>, activate the\n Image Animation<\/strong> extension in BricksFly<\/strong>,\n then edit a page in Bricks and select an image element. Open\n Image Animation<\/strong> and choose an effect:\n Reveal<\/strong> for sliding the image in from a direction,\n Scale<\/strong> for resizing it as you scroll, or\n Stretch<\/strong> for a dynamic stretching motion. Set the direction,\n start point, and easing, and the image will animate without writing any code.\n <\/p>\n<\/section>\n\n\n\n

What is Image Animation in Bricks?<\/strong><\/h2>\n\n\n\n

Image animation in Bricks<\/a> means applying scroll-based motion to an image element so it responds as the visitor moves down the page. Instead of an image simply sitting in place, it reveals, scales, or stretches according to the effect you choose and the scroll position you set.<\/p>\n\n\n\n

These effects are powered by GSAP<\/a>, the animation engine behind most premium web motion. Scroll-based image animation ties the effect to the viewport: you define where in the scroll the animation should start, which direction the image moves, and how the motion eases, and the animation plays as the visitor reaches it.<\/p>\n\n\n\n

In BricksFly, Image Animation is one of the GSAP extensions<\/a>. Rather than writing GSAP, you enable the extension, select an image element, and configure the effect through visual controls. The tool generates the animation for you, so a designer or portfolio creator can add professional scroll motion in minutes.<\/p>\n\n\n\n

Before You Start: Requirements and Activation<\/strong><\/h2>\n\n\n\n

Image Animation is a Pro extension in BricksFly, so a quick setup comes first.<\/p>\n\n\n\n

Requirements<\/strong><\/h3>\n\n\n\n
\"Requirement<\/figure>\n\n\n\n

Make sure you have installed:<\/p>\n\n\n\n