Animation

In flux The animation system is actively developed. Steps may differ slightly in recent builds.

Animate a block

1. Select a block on the canvas.
2. In the right sidebar, open the Settings tab.
3. Scroll to the Animation section at the bottom.
4. Choose an Effect from the dropdown (e.g. Fade In Up).

5. Optionally set a Trigger (e.g. On scroll into view), Delay, and Easing.

Expected result

In Preview mode the block plays the animation when the trigger fires. If no trigger is set, it plays on page load.

Available effects

Effect	Description
Fade In	Opacity 0 → 1
Fade In Up / Down / Left / Right	Fade + translate
Zoom In / Zoom In Up	Scale + opacity
Slide In (4 directions)	Translate only
Rotate In	Rotate + opacity
Bounce In	Overshoot spring
Spin (loop)	Continuous rotation
Pulse (loop)	Continuous scale pulse

Copy & paste animation

To apply the same animation to multiple blocks:

1. Configure the animation on one block.
2. In the Settings tab header, click Copy animation (the copy icon).
3. Select another block.
4. Click Paste animation (the clipboard icon).

Use the Clear animation (minus icon) button to remove the animation from a block.

Site-wide animation defaults

Set the default duration, easing, and once behavior in Settings → Theme → Animation. Any block you drop onto the canvas inherits these defaults until you override them per-block.

• Duration — how long the animation plays (e.g. 500ms)
• Easing — timing function (ease-out, ease-in-out, or a custom cubic-bezier(…))
• Once — when enabled, the animation plays once per page load; disable to replay on every scroll re-entry

Common issues

Block is invisible after paste — the animation may have started in an opacity:0 state and not replayed. Click away and back to re-trigger the animation, or use Clear animation and re-apply.

Animation plays in the editor but not in preview — some entrance effects require the trigger to fire. In preview mode, scroll the block into view to confirm scroll-triggered animations work.