Welcome to Atom Docs

Introduction

Welcome to the Atom Builder Framework documentation. Atom is a comprehensive Webflow framework designed to bridge the gap between custom development and rapid page building. Unlike traditional templates that rely heavily on static layouts, Atom functions as a scalable system that grows with your project, allowing you to build faster, stay consistent, and scale without complexity.

It is not just a component library or a design system; it is a methodology that improves how designers, developers, and clients collaborate in Webflow,.

What is Atom?

Atom is built to solve a common dilemma in Webflow development: the choice between the flexibility of custom classes and the speed of pre-built components. Atom operates on both levels simultaneously.

At its core, Atom provides a complete Design System driven by global variables for typography, colors, and spacing. On top of this foundation sits a Page Builder architecture, consisting of modular components, slots, and props that allow for drag-and-drop page construction without touching CSS.

Key Features

• ‍Fluid Design: The framework is fully fluid by default. It utilizes fluid sizing and spacing variables that adapt smoothly across screen sizes, minimizing the need for manual breakpoint adjustments.‍
• Component-First Architecture: Every part of the framework is built with reusable components. This allows you to update, duplicate, and reorganize content effortlessly using props and slots rather than complex class structures.‍
• Client-First Compatibility: Atom is designed to work harmoniously with established workflows. It supports the standard Client-First structure, ensuring that your class naming conventions and project organization remain clean and professional.‍
• Global Scalability: All core design decisions—colors, typography, and spacing—are controlled through global variables. This means you can rebrand an entire site or update a design system in minutes, not hours.

The Hybrid Approach

The defining characteristic of the Atom Builder Framework is its ability to support two distinct workflows within the same project. You are never forced to choose between "building with classes" or "building with components".‍

1. ‍The Design System (Class Mode) For designers and developers who require granular control, Atom offers a complete style guide and utility system. You can build using standard CSS classes, leveraging the Client-First structure for perfect pixel control. This mode is ideal for creating custom layouts that fall outside standard patterns.‍
2. The Page Builder (Builder Mode) For rapid production, content editors, or client handovers, Atom functions as a robust page builder. By utilizing Sections, Layouts, and Element components, you can construct full pages using only the Webflow settings panel (Props). This allows users to change layouts, visibility, and content without writing a single class.

You can mix these workflows freely. Build complex, custom sections with classes where needed, and use the rapid Builder Mode for standard content pages, ensuring the most efficient workflow for every specific task

Foundations & Style Guide

The Atom Builder Framework is built on a robust Design System that ensures consistency across your entire project. This system is available directly within your Webflow project on the Style Guide page.

For a live preview of all styles and components, visit the Atom Style Guide.

Relation to Client-First

If you are familiar with the Client-First methodology, you will feel right at home. Atom’s Style Guide includes all standard Client-First sections—Typography, Colors, UI Elements—but with powerful enhancements:

• ‍Fully Fluid: Unlike standard Client-First setups, Atom makes all spacing, sizing, and grids fluid by default using global variables.‍
• Expanded System: We have added dedicated systems for Layouts and Cards that follow the same naming conventions but provide structural superpowers not found in the base Client-First cloneable.

Note: The entire framework is available as a cloneable Webflow Showcase site. When you start a new project, we recommend cloning the official Atom project to get all these foundations pre-configured.

Typography

Atom decouples HTML tags from visual styling to maintain semantic HTML while allowing for flexible design.

• ‍Headings: Standard tags (H1–H6) and utility classes (heading-style-display-1, heading-style-h1, etc.).‍
• Text Sizes: A fluid T-shirt sizing scale from text-size-xsmall to text-size-xlarge.‍
• Weights & Styles: Utilities for weights (300–800), alignment, and styles like text-style-allcaps or text-style-muted.‍
• Rich Text: A pre-styled component for long-form content like blogs.

Colors

Atom uses a Color Scheme system. Instead of coloring individual elements manually, you apply a scheme class to a section or wrapper to automatically adjust backgrounds, text, and buttons.

• ‍Schemes: color-scheme-base (Default), color-scheme-dark, color-scheme-brand-1, color-scheme-brand-2, and color-scheme-gradient.‍
• Text Colors: Utility classes like text-color-primary or text-color-white for manual overrides.

UI Elements

Core interactive elements used throughout the site.

• ‍Buttons: Standard, Secondary, Link, and Icon variants. Includes an is-alternate combo class for dark backgrounds.‍
• Form Elements: Styled inputs, text areas, select dropdowns, checkboxes, and toggles.‍
• Icons: Support for both Image-based icons (fluid sizes from xxsmall to xlarge) and HTML Embed icons (for hover color control).

Radius & Effects

• ‍Radius: Consistent corner rounding variables (radius-small, radius-medium, radius-large).‍
• Box Shadows: Depth utilities ranging from shadow-xxsmall to shadow-xxlarge.‍
• Image Overlays: Helper classes to add tint layers (20%–80%) over images for better text contrast.

Structure & Layout Classes

These classes define the macro-layout of your pages.

• ‍Structure: page-wrapper, main-wrapper, and padding-global ensure consistent site-wide alignment.‍
• Max Widths: Classes to constrain content width, e.g., max-width-large, max-width-full.‍
• Block Wrapper: A standard wrapper (block_wrap) for stacking content.

Spacing (Margins, Paddings, Spacers)

Atom utilizes a fully fluid spacing system that scales with the viewport, based on Client First Class naming structure.‍

• ‍Padding & Margins: Directional utilities (e.g., padding-top, margin-bottom) combined with size classes (small, medium, huge).‍
• Spacers: Components (spacer-small, spacer-medium) used to create vertical rhythm between elements.

Grid & Flex Layouts

While utilizing standard naming conventions, Atom introduces a dedicated Layout system not found in standard Client First Style Guide.

1. ‍Auto Grid: Automatically flows content based on available space (auto-grid-fit or auto-grid-fill).‍
2. Standard Grids: Defined column structures like grid-1 (single column) to grid-4, including uneven layouts like grid-2-1.‍
3. Flexbox: Utilities for linear alignment (flexbox-row-left, flexbox-col-center) and wrapping.

‍Gaps: Control spacing within grids using classes like gap-small or gap-global.

Cards

Atom introduces a standardized Card system to manage content containers efficiently.

• ‍Card: The default container with options for is-box (padded background) or is-background (image background).‍
• Link Card: A clickable variation for navigation, supporting hover effects and the same layout options.‍
• Card Wrapper: Used to organize content within a card (card_body, card_content).

Utility Classes

A collection of helper classes for rapid adjustments, such as visibility toggles, relative positioning, or specific overrides found in the Style Guide.

Component Architecture

This chapter defines the core functionality of the Atom Page Builder. Unlike traditional workflows where you build structures from scratch using divs and classes, Atom provides a library of pre-configured components.

For a comprehensive visual overview of every component, visit the Atom Components Page.

The best way to learn Atom is to use it. We highly recommend cloning the official project. Every component in the Webflow Designer comes with built-in help text for its properties (Props). Hover over any setting in the Component Panel to see exactly what it controls.

Understanding Props & Slots

To use Atom effectively, you must understand the two ways to customize a component:

1. ‍Props (Properties): These are the settings found in the Webflow Component settings panel. You use props to toggle visibility (e.g., "Show Button"), change styling variants (e.g., "Background Color"), or input simple data (e.g., links or text overrides).‍
2. Slots: These are "empty" placeholders within a component where you can drop other components. For example, a Section has a slot where you can place a Grid, and that Grid has slots for Cards. This nesting capability is the key to the framework's flexibility.

Global Components

These components are the anchors of your site. Unlike standard content blocks, you typically only need one unique Navbar and Footer for the entire project.

How to Customize

We recommend keeping these components linked. Do not unlink or detach them. Instead, edit the main component definition to update your content, while using Props to control their appearance on specific pages.

1. ‍Edit Content Globally: Double-click the Navbar or Footer component to enter "Edit Mode." Here you can manage your specific link structure, dropdowns, and button text. Since these are global, changes here apply to every page.‍
2. Control Layout & Style via Props: Once your content is set, use the Props panel on selected instances to adjust the design dynamically without touching the code.‍
   
   • Visibility: Toggle elements like the Top Bar, Social Links, CTA Button, or Modal triggers.
   • Style: Switch Color Schemes (e.g., transparent or dark mode), add Borders, or select different Layout Variants.

Pro Tip: The Site Logo Component The Site Logo is a nested global component located inside the Navbar (and often the Footer). You don't need to upload your logo to every page. Simply edit the Site Logo component once, replace the placeholder with your brand assets, and it will instantly update across the entire website.

Advanced customization

If you need a complex navigation structure or a full rebrand but don't want to build it yourself, we offer fixed-price Service Packages (Essential, Build, and Scale) to handle these adjustments for you.

Header & Section Structure

Every page builds upon these foundational blocks. They handle the outer layout, padding, and background logic.

Headers

In the Atom framework, the Header component serves as the "Hero" section—the very first element users see at the top of a page. It sets the visual tone and hierarchy for the content that follows.

Atom provides four distinct Header variations to cover the most common design patterns:

• ‍Header Base: The most flexible foundation. It provides the core structural wrapper and spacing props but leaves the content slot empty. Use this when you need to build a completely custom composition inside the hero area using Grids or Flex rows.‍
• Header Stack: A robust, component-based layout. It allows you to stack standard elements like a Title, Button Group, and Visuals.‍
  
  • Pro Tip: You can set the image component to position: absolute via props to create full-width backgrounds, or use the "Image Top" variant for a vertical layout.

• ‍Header Edge: Creates a modern "page bleed" effect. It allows an image to stretch all the way to the edge of the viewport (left or right) while keeping the text content aligned within the global container. Ideal for split-screen visuals.
• Header Background: Designed specifically for text-overlay layouts. It places your content (Title, Buttons) directly over a full-width background image or video.‍
  
  • How it works (The "Absolute" Trick): Atom does not use standard CSS background images. Instead, we use a standard Image component placed inside the header slot.‍
  • If building from scratch: Add an Image component and set the Position Prop to Absolute.
  • This setting releases the image from the document flow, allowing it to stretch and fill the background behind your text. This method provides significantly better control over responsive scaling and object-fit positioning compared to CSS backgrounds.
  • ‍Overlay Controls: Includes built-in props to add a color overlay (tint) with adjustable opacity on top of the image to ensure text readability.‍
  • Video: You can replace the Image component with the Starter Video Background component for dynamic motion headers using the same absolute positioning logic.

Sections

While Headers start the page, Sections build the body. They all share the same spacing and container logic but offer different structural layouts.

• ‍Section Base: The starting point for any standard content strip. It includes props for container width (Small, Medium, Large) and color schemes. Use this for standard text blocks, grids, or any content that needs to be contained within the page margins.‍
• Section Edge: Designed to create dynamic "Page Bleed" layouts often seen in modern web design. In this layout, an image stretches all the way to the edge of the browser window (left or right), while the text content remains perfectly aligned with the site's global container.‍
  
  • How to build: Add a Title (content) and an Image component into the slot.The Trick:
  • The Trick: Select the Image component and set its position prop to absolute. This releases it from the grid constraints, allowing it to flood the side of the screen. You can position the image on the left or right to create alternating layouts down the page.Section Background:
• Section Background: Similar to the Base, but pre-configured to handle full-width background images behind your content.Construction Logic:
  
  • Construction Logic: Just like the Header Background, this section relies on an actual Image component rather than a background style.If building from scratch:
  • If building from scratch: Drop an Image component into the section's slot. Go to the Props panel and switch Position to Absolute. This ensures the image sits behind your content and adapts fluidly to different screen sizes.Visual Control:
  • Visual Control: Includes props for Overlay Opacity and Color Scheme adjustments, allowing you to darken or tint the background image instantly to make white text pop.

Layouts & Content Blocks

Once the section structure is in place, use these layout components to arrange your content. These are the essential building blocks for every page.

Auto Grids

The most versatile tool in the framework. The Auto Grid automatically places content into columns based on available space using advanced CSS Grid logic (minmax). This means you do not need to manage breakpoints manually—the grid adapts fluidly.

Atom provides two distinct versions:

• ‍Auto Grid Fit
  
  • ‍Behavior: Flexible. If a row isn't full, the items will expand to fill the remaining space.‍
  • Use Case: Ideal for feature lists or balanced layouts where you want items to stretch.
• Auto Grid Fill:‍
  
  • Behavior: Rigid. It respects the defined column width strictly. If a row isn't full, it leaves empty space at the end.‍
  • Use Case: Best for directories or logo lists where alignment is critical.‍
• Controlling Density (Column Size Variants) Instead of setting columns per device, you control the grid density using the Column Size variant prop (ranging from XXS to XL). This setting defines the minimum width an item needs before it wraps to a new line.‍
  
  • Smaller Size (e.g., Column XXS - 12rem): Requires less width per item → Fits more columns per row.
  • Larger Size (e.g., Column L - 24rem): Requires more width per item → Fits fewer columns per row.

Standard Grids (Even & Uneven)

When you need a fixed, predefined structure rather than automatic flowing.

• ‍Even Grid: Creates symmetrical columns. Available variants range from grid-1 (single column) to grid-4 (four equal columns).
• Uneven Grid: Creates asymmetric layouts, perfect for "Content + Sidebar" or "Image + Text" compositions.Ratios:
  
  • Ratios: Available in 2-1 (2/3 + 1/3), 1-2, 3-1, and 1-3.

Flexbox Slots

Use Flexbox components for linear alignment of elements, either horizontally or vertically.

• ‍Flex Row Slot: Aligns items side-by-side.Use Case:
  
  • Use Case: Button groups, logo strips, or navigation links.Alignment:
  • Alignment: Use classes or props to align items to the Left, Center, Right, or Space Between.
• Flex Column Slot: Stacks items vertically.Use Case:
  
  • Use Case: Grouping a "Title + Text + Button" stack so they can be centered together within a larger grid.

Controlling Spacing (Gaps)

All layout components work seamlessly with Atom’s global spacing variables. You can adjust the space between grid items or flex items using Gap classes (e.g., gap-small, gap-large, gap-global) directly on the component to ensure consistent rhythm across the site.

Interactive Components

Advanced functionality pre-packaged into easy-to-use components.

• ‍Accordions: Expandable content sections ideal for FAQs. You simply add a Question (Title) and Answer (Body text).‍
• Tabs: Supports up to 6 tabs with options for Top or Side menu layouts. You can place any component inside a Tab Pane.‍
• Modals: Reusable popups for forms or focused content. Use "Edit Mode" in Webflow to access the internal slot and customize the content.‍
• Marquee: The Marquee component creates a continuously scrolling horizontal loop for content such as logos, text, or custom blocks. You can add any number of items—including logos or content via block slots.‍
  
  • Placement: The marquee can be placed edge to edge outside the global padding, inside a full-width section, or within a container where the edge fade remains visible.‍
  • Note: When used within a page-width container, note that the available space limits how many items can appear at once.

Icons System

Atom utilizes a lightweight, flexible approach to icons. While the framework comes pre-populated with Heroicons (a free, high-quality library), you are not locked into any specific system. You can use SVG paths from any library you prefer.

Instead of maintaining hundreds of individual icon components, Atom uses just two master components that can render any shape:

1. ‍Icon Stroke: Designed for outlined icons where the line thickness is controlled by CSS.
   
   • ‍Key Feature: The stroke width is linked to a Global Variable. This means you can adjust the border thickness for every stroke icon on your site instantly, ensuring perfect consistency regardless of the icon source.‍
   • Note: This requires icons specifically designed as "strokes" (borders), not filled shapes.
2. Icon Solid:‍
   
   • Designed for filled icons.
     Use this for standard shapes, logos, or "filled" style icons. Even icons that look like outlines but are actually filled shapes should use this component.

1. ‍Find your icon: Go to Heroicons.com (or any other SVG library).Heroicons.com (or any other SVG library).Copy the Path Data:
2. Copy the Path Data:    ◦ You don't need the full
   
   • You don't need the full <svg> code. You only need the path data found inside the d="..." attribute.Example:
     
     • Example: If the code is <path d="M19.5 13.5 12 21..." />, you only copy M19.5 13.5 12 21....Note:
   • Note: If your icon has two separate paths, the component includes a secondary prop (Path 2) to handle complex shapes.Paste into Prop:
3. Paste into Prop: Select the Icon component in Webflow and paste the code into the Path Attribute Prop.Done:
4. Done: The icon renders instantly and inherits size and color settings from the framework.

How to use

Pro Tip: Custom Icons If you have custom brand icons or complex logos that you use frequently, we recommend building them as Components. Create a new component for your specific icon. This allows you to easily drop it into the "Icon Slot" of other components (like Buttons or Cards) just like the standard system icons.

Toggle Mode

Toggle Mode allows users to switch between different color schemes (Dark, Brand 1, or Brand 2) across the entire site. The selected mode is stored locally, ensuring the preference remains active as the user navigates between pages.

The Toggle Component

The functionality is contained within a dedicated Toggle Component. By default, this component is placed in the Footer, but it can be hidden or moved to any location on the site to fit your design.

• ‍Customization: You can configure the component to show toggles for Dark, Brand 1, or Brand 2 modes.‍
• Built-in Script: The necessary script is embedded directly within the component, so no external code setup is required.

It is important to note that toggling a global mode does not override sections or components that have a specific color scheme explicitly defined. If a user switches to "Dark Mode," only sections using the default Base scheme will change. A section explicitly set to "Brand 1" (via the color-scheme-brand-1 class) will remain in Brand 1, regardless of the global toggle state. This ensures that distinct design elements retain their intended look.

Override Logic

For a site to be fully dependent on Toggle Mode (e.g. a complete Dark Mode switch), you must ensure that no specific color scheme classes are applied to your sections. All layouts must remain in the default Base scheme to correctly inherit the global toggle state.

CMS & Dynamic Content

Atom includes a suite of powerful components designed specifically to display dynamic content from the Webflow CMS. These components bridge the gap between your database and the visual design system.

CMS Lists

The CMS List components are dynamic wrappers for Webflow Collection Lists. They come pre-configured for the "Blog Posts" collection, meaning fields like Title, Date, Image, and Category are already connected and ready to use.

There are three different CMS List Components to match your design needs:

1. CMS List Card: Standard layout where buttons link to the detail page.‍
2. CMS List Link Card: The entire card is clickable. Ideal for Portfolios.‍
3. CMS List Background Card: A version of the Link Card that defaults to the "Box" style.

Each CMS List Component has various Props to adjust setting and style:

• ‍Controlling Layout: You control the layout density using the Column Size setting in the Props panel, just like any Auto Grid Component.‍
• Pagination: Toggle the Show Pagination prop to enable "Previous/Next" navigation buttons.‍
• Sorting & Limits: Use standard native Webflow settings on the Collection List wrapper to limit the number of items shown or to define the sort order (e.g., "Newest to Oldest").‍
• Layout Variants: Easily switch between a clean Card layout or a contained Box layout (with background color and padding) to match your section's design.‍
• Image Styling: Control specific details like Image Radius directly in the props to ensure visuals match your brand guidelines.‍
• Additional Styles: Use class props to apply utility classes for specific gaps, overlays, or borders to further refine the look.

CMS Filters

Atom utilizes the powerful Finsweet Attributes library to create dynamic sliders and filtering systems without writing custom code.

Required Script: To enable these features, you must add the Finsweet Attributes (v2) script to your project. Place the following code inside the <head> tag of your page or in the global Project Settings:

<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

The CMS Filters component dynamically generates filter buttons based on your "Categories" collection. To make it work, you simply need to link the filter component to the list you want to filter using the Attribute Prop.

How to Connect

1. ‍Select the Filter Component: In the Props panel, find the Attribute Prop and set the value to filters.Select the Target CMS List:
2. Select the Target CMS List: Select the CMS List you want to filter. In its Props panel, set the Attribute Prop value to list.

That’s it! The system is pre-configured to filter based on the "Category" identifier by default.

Need Advanced Filtering? This setup handles standard category filtering perfectly. However, Finsweet Attributes is extremely powerful and supports search bars, sorting, radio buttons, and complex multi-filtering. If you need a complex setup, you can either follow the official Finsweet Documentation or check out our Service Packages. We can help you build advanced filtering logic tailored to your specific business needs.

CMS Sliders

The CMS Slider component works by taking items from a standard Webflow CMS List and dynamically moving them into a slider structure using the Finsweet script.

Required Script: To enable these features, you must add the Finsweet Attributes (v2) script to your project. Place the following code inside the <head> tag of your page or in the global Project Settings:

<!-- Finsweet Attributes -->
<script async type="module"
src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js"
fs-list
></script>

• ‍How it works: The component contains a "Hidden CMS List". The script reads these items and places them into the slides.‍
• Visualizing the Source: If you need to edit the source list or see what data is being pulled, use the Variant Prop on the component to reveal the hidden list.‍
• Customizing Design: The slider uses standard Card components. To change the look of your slides, simply replace the Card component inside the Hidden CMS List with another variant or a custom card.‍
• Multiple Sliders: Since the slider relies on specific ID/Class structures, if you need more than one CMS Slider on a single page, we recommend duplicating the component to ensure they function independently.

Workflow & Starters

Atom is designed to adapt to your workflow, not the other way around. Whether you are a designer who wants to move fast or a developer needing full control, the framework supports three distinct ways of building.

Workflows

The Builder Workflow

This is the fastest way to build standard layouts. It relies entirely on the Component Architecture.

• ‍How it works: You drag and drop Sections, Layouts, and Elements onto the page.‍
• Customization: You use the Props Panel to change content, visibility, and layout (e.g., changing a Grid from 3 to 4 columns) without touching a single class.‍
• Best for: Rapid prototyping, marketing pages, and ensuring strict consistency for content editors and handing over a Webflow project to a Marketer.

The Developer Workflow

When you need a custom design that goes beyond standard props, you use the underlying CSS framework directly.

• ‍How it works: Instead of dragging in pre-made sections, you build layouts using standard HTML elements (Divs, Text, Links) and apply Atom Classes directly from the Style Guide.‍
• External Libraries: Since Atom is fully compatible with Client-First, you can easily copy and paste clean layouts from libraries like Relume or Finsweet and simply apply Atom’s styling classes to match your brand.‍
• Best for: Highly custom layouts, unique interactions, or when you want full control over the HTML structure.

The Hybrid Workflow

You don't have to choose one workflow over the other. The most powerful way to use Atom is to combine them: build your custom layout structures with CSS (Developer Mode), but drop in complex UI elements like Navbars, Cards, or Buttons as Components (Builder Mode).

⚠️ Important: Do NOT Unlink Components You should avoid "Unlinking" components to customize them.

‍The Problem: Atom’s components rely on Variants to control styling via attributes. If you unlink a component, Webflow will attempt to convert these attributes into static CSS, often generating messy, auto-generated combo classes that pollute your CSS.‍

The Solution: If a component doesn't fit your needs, it is cleaner to build that specific element from scratch using the Developer Workflow (Classes) rather than unlinking the component instance.

Starters

While components cover most needs, some elements require too much variability to be locked inside a component. For these, we provide Starters.

Starters are pre-built foundations designed to be distinct from the component system. They are intended to be Unlinked or Duplicated immediately to give you a head start on complex custom builds.

• ‍Starter Form: A complete form structure with inputs, checkboxes, and buttons.
• ‍Starter Slider: A native Webflow slider pre-configured with Atom classes.Starter Lightbox:
• Starter Lightbox: A ready-to-use lightbox setup.Starter Video Background:
• Starter Video Background: A setup for background videos that handles absolute positioning and overlay logic.

Global Styling

Global Variables

Remember that regardless of whether you use Components or Classes, the entire visual language is controlled by Global Variables.

Update Once: Change a color, font size, or border radius in the Variables panel, and it instantly updates every Component, Starter, and Class across your entire site.

Global CSS Component

While Variables control the visual design, Atom also relies on a specific component named Global Styles to handle advanced functionality and browser rendering. This component is present on every page and contains five specific code embeds:

• ‍CF Style Overrides CSS: Contains necessary overrides to ensure Client-First utility classes behave perfectly within the Atom ecosystem.Line Height Trim CSS:
• Line Height Trim CSS: A utility that trims the extra white space above and below text elements. This ensures that spacing between headings and paragraphs is visually accurate to your design values.Slider CSS:
• Slider CSS: Custom styling for the native Webflow Slider navigation (dots and arrows), allowing them to match the framework's design language.Hover Effects CSS:
• Hover Effects CSS: Centralized CSS that controls the hover states for Cards, Link Cards, and Buttons. Editing this file allows you to update interaction styles globally.Custom CSS:
• Custom CSS: An empty slot reserved for your own global CSS. Use this embed to add styles that should apply to the entire website.

Animations (GSAP)

Atom leverages Webflow’s new native GSAP integration to provide professional-grade animations with zero code. Instead of building complex interactions manually, you control motion directly through Component Props.

The system is divided into two automatic behaviors:

1. ‍Load Animations: Trigger immediately when the page loads (used for Headers).‍
2. Scroll Stagger Animations: Trigger when elements enter the viewport (used for Sections, Grids and Elements).

How to use

Almost every component in Atom (Headers, Sections, Grids, Cards) includes a dedicated Animation Attribute Prop.

1. ‍Select the Component: Click on the component you want to animate (e.g., a Header Stack or an Auto Grid).‍
2. Activate: In the Props Panel, find the Attribute prop named Animation (or Load Animation / Scroll Animation).

3. Set to True: Simply type true (or toggle the switch) to activate the animation.

The framework automatically handles the logic. If it’s a Header, elements will stagger in on load. If it’s a Section or Grid, content will fade and slide in as the user scrolls down.

Best Practices

While it is tempting to set every component to true, professional motion design requires restraint.

• ‍Don't Animate Everything: If you animate the Section, the Grid, and the Cards inside the grid individually, the user will be overwhelmed by motion.‍
• Choose Your Target:‍
  
  • Scenario A: Animate the Section  to stagger in the children in the entire block.‍
    
  • Scenario B: Keep the Section static, but set animation to true on the Auto Grid to have the cards stagger in sequentially.‍
• Test in Designer: Because Atom uses Webflow's native GSAP engine, you don't need to publish to see the results. Just press Preview (eye icon) in Webflow to test your timing and staggering instantly.