Docs / Design

Animations

Animations can make a page feel alive, but they are easy to overdo. A little motion draws attention to what matters. Too much makes the page feel busy and slows reading.

Last updated

Add an animation

Select a block and open the Animation tab. Choose a trigger and an effect.

Triggers

  • On reveal plays the animation when the block first enters the screen.

  • On scroll ties the animation to the scroll position. The block changes gradually as it moves up the screen.

On reveal is the safer choice for most content. On scroll works best for a single hero image or a short sequence, not for every section.

Effects

The effects include fade, slide up, slide down, slide left, slide right, zoom, blur, rotate, flip, and wipe.

Pick an effect that matches the direction of the content. A card sliding up from below feels natural. A paragraph rotating in usually does not.

Speed and easing

  • Fast is good for small UI changes.

  • Normal is a safe default.

  • Slow and Very slow suit large images and hero sections.

Easing changes how the motion starts and stops. Smooth is a good default. Spring adds a playful bounce. Linear is best for scroll-linked motion.

Intensity

Intensity controls how far or how much the block moves. Subtle is usually enough. Strong can work for a hero, but it can also feel heavy.

Delay and stagger

Delay waits before the animation starts. Use it to make a sequence: heading first, then text, then button.

Stagger spreads the animation across the children of a block. It works well for a row of cards or a list of features.

Do not make visitors wait. A delay longer than half a second starts to feel like the page is slow.

Once or every time

  • Once plays the first time the block enters the screen.

  • Every time plays again when the block leaves and comes back.

Use Once for most content. Every time can be distracting if the visitor scrolls up and down.

Preview

The Animation tab has a replay control. Use it to check the effect without scrolling away and back.

Also check the page on a phone. Motion that feels gentle on a desktop can feel stronger on a small screen.

Accessibility

Visitors who ask their device to reduce motion do not see these animations. That is intentional. Do not rely on animation to reveal essential information.

If content is hidden until an animation plays, make sure it still appears for someone who has reduced motion turned on.

A simple starting recipe

For a feature row:

  1. Build the row and its cards.

  2. Select the row and add an animation.

  3. Choose On reveal, Slide up, Subtle, and Once.

  4. Add a small stagger so the cards arrive one after another.

  5. Keep the delay short.

Then check the page on mobile and with reduced motion enabled if you can.

Remake

A website builder that works like a document. CMS, forms and EU hosting included.

Resources

© 2026 Remake. All rights reserved.