How to Build CMS Scatter Animations in Webflow

This advanced tutorial demonstrates how to construct a sophisticated, CMS-powered "grow and scatter" gallery animation within Webflow. By synthesizing CMS data, custom CSS calculations, Webflow variables, and GSAP interactions, the lesson transforms complex motion design into an accessible, highly systematic build. The core value of this tutorial lies in teaching learners how to orchestrate these modern web development tools into a singular, cohesive system that produces highly polished, professional-grade visual layouts.

The technical foundation of this effect relies on decoupling structural styling from animation logic. Using custom numerical variables for the grid's columns and rows, alongside a dedicated move factor variable, the setup employs advanced CSS mathematics to perfectly center items regardless of the grid's underlying dimensions. Through an embedded CSS block utilizing functions like nth-child and sibling-index, every individual image's specific coordinate is dynamically calculated. The complex scattering effect is then elegantly achieved by animating just one master variable, transitioning the move factor from one down to zero.

By completing this build, viewers will achieve a fully functional, highly responsive animation framework that can be seamlessly adapted to any future project. A crucial learning outcome is the mastery of Webflow's native variable modes, which allows developers to effortlessly adjust column and row variables across different breakpoints—such as shifting from a six-column desktop view to a three-column portrait layout—without ever needing to rewrite the core animation logic. Ultimately, learners gain both a robust, deployable asset and a much deeper understanding of advanced Webflow architecture.

• Strategic Grid Architecture: To prevent layout distortion during complex interactive movements, establish explicit percentage-based row heights (e.g., 50% for two rows) and utilize item padding rather than relying on native grid gaps.
• Dynamic Element Targeting: Leverage the CSS sibling-index function and nth-child targeting—tied directly to a CMS integer field—to safely and dynamically calculate individual item positions without duplicating code.
• Single-Variable Animation Logic: Simplify complex, multi-element scattering by tying precise spatial X and Y translation coordinates to a central move factor variable. An animating this variable from 1 to 0 elegantly executes the entire layout transition.
• Calculated GSAP Sequencing: Construct a professional two-part interaction sequence by mathematically calculating the timing: first executing a staggered scale animation to bring the images in, followed immediately by the variable animation to scatter them perfectly into place.‍
• Scalable Responsiveness via Modes: Utilize Webflow's native variable modes to define unique structural values (columns and rows) for specific viewport breakpoints. This guarantees that the custom CSS and animation logic remain perfectly responsive across all devices automatically.

• 01:09 - Added custom fields (an image field and an integer field named "order") to the CMS collection to store the visuals and dictate grid sorting.
• 02:11 - Assigned the section class with a height of 100 VH and set the main-container class to a 100% height with a max width of 90mm.
• 03:19 - Connected the collection list wrapper to the "pictures" CMS collection and configured the list to sort items sequentially using the order field.
• 03:40 - Assigned the class pictures list and set its display property to Grid with 6 columns and 2 rows.
• 04:19 - Opened grid edit mode and explicitly set the height of each grid row to 50% to ensure layout stability.
• 05:42 - Applied padding to all sides of the collection item to act as spacing, actively avoiding the native grid gap property to prevent layout breakage.
• 06:01 - Added the custom attribute data-animate-item to the collection item to ensure interactions remain independent from styling classes.
• 06:39 - Set the image element's width and height to 100% and changed its fit property to "cover".
• 07:01 - Added the custom attribute data-animate-image directly to the image element.
• 07:38 - Created a new Webflow number variable called "move factor" and set its value to 1.
• 07:59 - Created a number variable named "columns" and set its value to 6 to represent the layout structure.
• 08:22 - Created a number variable named "rows" and set its value to 2.
• 09:24 - Inserted an embed element inside the collection item to inject custom CSS that mathematically centers the items using the generated variables.
• 13:50 - Created a new GSAP page load interaction named "page load grow and scatter".
• 14:44 - Added an animate action to handle image scaling, targeting the data-animate-image attribute to scale from 0 to 1.
• 15:50 - Enabled the stagger option for the scale animation and set the offset time to 0.2 seconds.
• 16:30 - Added an animate variable action to handle the scatter effect and mathematically set its start time to exactly 3 seconds.
• 17:43 - Configured the scatter interaction to animate the "move factor" variable to 0, shifting the elements back into their grid positions.
• 21:54 - Set up Webflow variable modes for tablet, landscape, and portrait breakpoints to automatically adjust the layout values for grid responsiveness.

Webflow CMS "Grow & Scatter" Animation Tutorial

1. Set Up the CMS Structure (01:09 - 02:11)

• How: Create a CMS collection called "pictures". Alongside default fields, add an "image" field and an integer field called "order".
• Why: The image field stores your gallery content, while the numeric "order" field is essential not just for sorting the list, but for dynamically targeting items with custom CSS later in the build.

2. Build the Structural Foundation (02:11 - 03:40)

• How: Add a 100VH section, containing a 100% height main container (with a 90rem max-width), and a 100% height content wrapper. Inside this wrapper, place a Collection List connected to the "pictures" CMS, sorted by the "order" field from smallest to highest, and set its height to 100%.
• Why: This setup ensures the gallery expands correctly within the viewport's available height, while the max-width prevents it from looking distorted on extremely wide screens.

3. Configure the CSS Grid & Row Heights (03:40 - 05:02)

• How: Apply a grid display to the Collection List (e.g., 6 columns, 2 rows). Crucially, open Grid Edit Mode and manually explicitly set the row height to a percentage calculated by dividing 100% by the number of rows (e.g., 50% for 2 rows).
• Why: Relying on default "auto" values in a CSS grid during a complex animation can cause unpredictable shifting. Setting explicit percentage-based row heights guarantees the layout stays perfectly stable.

4. Handle Grid Item Spacing (05:02 - 06:01)

• How: Do not use the native grid gap property. Instead, apply a small amount of padding to all sides of the individual Collection Item (the pictures item class).
• Why: Because row heights are defined by strict percentages (e.g., 50%), adding native gap spacing would push the total height beyond 100% of the container, breaking the layout. Item padding generates visual space while keeping the underlying mathematical structure intact.

5. Apply Custom Data Attributes (06:01 - 07:20)

• How: Add the custom attribute data-animate-item to the Collection Item. Inside the item, set the image element to 100% width and height with "fit: cover," and add the custom attribute data-animate-image to it.
• Why: Using data attributes decouples your animation triggers from your CSS styling classes, making the entire interaction system highly reusable across different projects.

6. Define Webflow Variables (07:20 - 09:24)

• How: In the Variables panel, create three number variables: move factor (set to 1), columns (set to your initial column count, like 6), and rows (set to your initial row count, like 2).
• Why: columns and rows allow the upcoming CSS math to perfectly center items regardless of the grid size. The move factor acts as a master control toggle; animating this single variable later will drive the complex visual scattering of every element.

7. Embed Dynamic CSS Logic (09:24 - 13:41)

• How: Place an HTML Embed directly inside the Collection Item. Paste custom CSS that targets [data-animate-item]:nth-child() using the CMS order field. Inside the code, assign sibling-index to a variable i, calculate the x and y position using the columns variable, and define shiftX and shiftY formulas multiplied by the move factor. Apply these shift variables to a CSS translate property.
• Why: Putting the embed inside the item automatically generates a unique code block for each image, giving the CSS direct access to that specific item's CMS order integer without duplicating behavior. Multiplying the centering formulas by move factor sets up the logic so that scaling the variable down will smoothly transition the translations.

8. Sequence the "Grow" Animation (13:41 - 16:30)

• How: In the Interactions panel, create a new "Page Load" animation. Add an Animate action targeting the data-animate-image attribute. Set a "From" scale of 0, ease to "power2-out", and duration to 0.8s. Enable Stagger (offset time: 0.2s).
• Why: This creates the first sequence of the effect, bringing the images smoothly onto the screen from their calculated center positions one by one in a staggered fashion.

9. Sequence the "Scatter" Animation (16:30 - 19:04)

• How: Add an "Animate Variable" action targeting move factor. Calculate the start time mathematically (e.g., 11 intervals × 0.2s + 0.8s duration = 3 seconds start time). Animate the variable "To" a final value of 0, with a 0.8s duration and "power2-out" easing.
• Why: Calculating the exact start time ensures the scatter occurs precisely as the final image finishes growing. Because the CSS offset is multiplied by move factor, animating this variable to 0 mathematically zeroes out the translation, causing all elements to slide smoothly back to their native grid cells.

10. Automate Responsiveness Using Variable Modes (19:04 - 23:45)

• How: Open the Variables panel and create new Variable Modes (e.g., Tablet, Landscape, Portrait). Set them from "Manual" to "Automatic" and attach them to specific breakpoints. Override the columns and rows values for each mode to match the grid structure you want at that screen size (e.g., 4 columns/3 rows for Tablet).‍
• Why: Variable modes dynamically update the math values powering your CSS on the fly when the browser resizes. This ensures the centering formula stays accurate across all devices automatically, requiring no rewrite of the animation logic or CSS code.

You can create a scatter effect by calculating element coordinates and multiplying their custom CSS translation by a move factor variable. Using GSAP, simply animate this single variable from 1 down to 0 to smoothly transition the items into their defined grid positions.

Individual CMS items can be uniquely targeted by placing an HTML embed directly inside the collection item. Within the embed, use the CSS nth-child pseudo-class populated by a dedicated CMS integer field to style each item without duplicating behavior.

When setting row heights to exact percentages, avoid using the native grid gap property because the added gap will exceed the available space and break the layout. Instead, create the necessary spacing by applying padding to all sides of the individual grid items.

Variable-driven layout calculations can be made fully responsive by utilizing Webflow's native variable modes. Set variable modes to automatic and assign distinct numerical values to your layout variables based on desktop, tablet, landscape, and portrait breakpoints.