Scroll Animations

Animate images, texts and other elements as they enter the screen — or let them float around with physics.

Click an element in the Gridder to open its sidebar. Elements with an animation show a small label above them in the Gridder:

Element animation labels above two elements in the Gridder

There are four ways to animate:

• Element Animations — animate a whole element, e.g. an image
• Text Animations — animate texts by lines, words or characters
• Animation Groups — animate several elements as one staggered sequence
• Float Physics — let elements float, bounce and collide
• Simple Parallax — move elements at different speeds while scrolling

Element Animations

Click an element, then turn on "Element Animation" in the sidebar:

Turn the Element Animation on with the toggle in the sidebar

The Element Animation panel opens:

The Element Animation panel with presets and properties

Pick a preset like "Fade", "Slide Up" or "Zoom In" — or build your own animation by combining properties: Scale, Direction, Skew, Rotate, Fade, Blur, Grayscale, Brightness and Reveal. Click a property to activate it and adjust its values, for example the direction and distance the element slides in from.

Click the eye icon to preview the animation right in the Gridder.

With "Save As" you can save your combination as your own preset and reuse it on other elements and pages.

Text Animations

Text elements have an extra "Text Animation" panel.

The Text Animation panel: choose what gets animated and how

Choose what gets animated: whole Lines, single Words, each Character — or the Whole Text at once.

The Mode defines how the parts appear: Instant, Fade or Masked, where the text reveals from behind an invisible mask. Add-ons like Slide, Scale and Blur can be combined on top, with a direction of your choice.

For right-to-left languages, set the reading direction to RTL so the animation runs in natural reading order.

Trigger & Play vs. Scroll Scrub

Every animation has a Playback setting. Click the settings icon next to "Element Animation" or "Text Animation" to choose how the animation plays:

Trigger & Play: the animation starts when the element comes into view, then runs by itself with a fixed duration.

Trigger & Play settings: trigger point, duration, delay, re-entry

"Show from Top" sets when it starts: 100% = as soon as the element peeks into view, 50% = when it reaches the middle of the screen, 0% = when it reaches the top. Set the duration and an optional delay in milliseconds.

With "Re-entry" the animation can play again when you scroll away and back — from above, from below, or both.

Scroll scrub: the animation follows your scrollbar — scroll down and it plays forward, scroll up and it plays in reverse. Fast scrolling means fast animation.

Scroll scrub settings: animation length and full scroll range

"Animation length" controls how much scrolling the animation takes: higher = slower and more drawn-out, lower = quick and snappy. "Full scroll range" stretches the animation until the element has fully scrolled off the top of the screen.

Both modes can be disabled on phones separately.

Timeline

The Timeline lets you choreograph all "Trigger & Play" animations of a page in one place — especially useful for crafting the entrance of your page, so everything above the fold animates in nicely when someone arrives.

As soon as at least one element has a Trigger & Play animation, the timeline button appears in the Gridder toolbar:

The Timeline button in the Gridder toolbar

Every Trigger & Play animation shows up as a bar. Drag a bar to set when the animation starts, drag its edges to change its duration — each animation can be timed individually, like in a video editor:

The Timeline shows every Trigger & Play animation as a bar you can drag

The Timeline is only for Trigger & Play animations. Scroll scrub animations don't appear here — their timing is your scrollbar.

Animation Groups

Animation Groups animate several elements as one staggered sequence — one after the other, like a cascade.

Select multiple elements by holding Shift while clicking them, then click "Build Animation Group":

Hold Shift and click multiple elements, then click Build Animation Group

The group builder opens in the sidebar. Here you name the group and define how the cascade plays:

The Animation Group builder: name, sequence, direction and presets

The Sequence defines the cascade: "Stagger" is the time between each element starting, "Duration" how long each element animates, "Delay" an optional wait before the whole group starts. The direction arrows control the order the cascade runs through your layout.

Image elements use the Element Animation preset, text elements the Text Animation preset — so one group can animate mixed content.

In the group's settings you can fine-tune the stagger easing, the trigger point and re-entry behavior:

Animation Group settings: stagger easing, trigger point, re-entry

"Scale Animations based on element size" makes bigger elements animate proportionally longer, which often feels more natural.

Float Physics

Float Physics lets an element float freely with a physics simulation: it can keep moving, bounce off edges, collide with other Float Physics elements — and your visitors can grab and throw it.

The Float Physics panel

"Restrain To" sets the area the element can float in: its Row, the Viewport or the whole Document.

In the physics settings you can preview and tune the behavior: dragging, auto floating, collisions, gravity and bounce. Under "Advanced" you find Air Friction, Mass, Drag Spring, Throw Strength and Hover Push.

Physics Settings with the preview and Advanced options expanded

Note: Float Physics replaces the Element Animation on that element — an element either animates in on scroll or floats with physics.

Simple Parallax

Simple Parallax is the lightweight scroll effect where elements move at different speeds while the page scrolls. Use it when images or text should drift slower or faster than the normal page movement, without building a full Element Animation.

First enable it in Lay Options by checking Simple Parallax:

Enable Simple Parallax in Lay Options

After that, right-click an element in the Gridder and set its y-parallax speed. A value of 1 means normal page speed. Lower or higher values make the element move at a different speed, which creates the parallax feeling.

Set the y-parallax speed from the element context menu

Here is a video showing the effect:

The images move at different speeds while the page scrolls

Tip: elements near the bottom of the page should usually use a parallax value of 1. Otherwise the parallax offset can create a large blank space at the end of the page.

Site-wide Scroll Animations (Lay Options)

You can also animate your whole website at once — without setting anything up per element. In "Lay Options" → "Scroll Animations" you find site-wide scroll animations: every element animates in as you scroll to it, like a Trigger & Play animation applied to everything.

Site-wide Scroll Animations in Lay Options

Choose what gets animated: Opacity, Scale and Blur — and whether row backgrounds and colored row gutters animate in too. "Offset Desktop" and "Offset Mobile" set how many pixels elements move up while appearing.

Set the duration and pick an easing preset like "Smooth", "Snappy" or "Overshoot" — or enter your own CSS cubic-bezier curve.

Two things to know:

• Site-wide animations don't show up in the Gridder or in the Timeline — they just happen automatically on the website.
• Any Element Animation, Text Animation or Animation Group you create overrides the site-wide animation for that element.