Animation & interaction
Select an item and open the Animate tab. There are four kinds of motion, and an item can use any of them together - for example, a headline that rises in when the page opens, then drifts as you scroll.
| Motion | When it plays | Use it for |
|---|---|---|
| Scroll effect | Follows the visitor’s scrolling, forwards and backwards. | Parallax, things that fade or grow as they pass, text that reveals letter by letter. |
| Load intro | Once, the moment the page opens. | The first screen: a headline and buttons that arrive in sequence. |
| Entrance effect | When the item is first scrolled into view (or on load). | Sections further down that should appear as they arrive. |
| Loop | Forever, by itself. | Floating badges, pulsing buttons, spinning rings, scrolling logo strips. |
Scroll effect
Pick a ready-made effect (Fade up, Fade in, Scale in, Slide in from either side, Blur in, Split-text reveal, Parallax drift, Hold then fade out), then open Customise to change anything:
Scroll the canvas in the editor to preview it.
Load intro
Plays once when the page opens. Pick a preset, then set Wait before starting and Takes (seconds). Customise sets exactly how it starts (the same Across / Down / Size / Rotate / Opacity / Blur boxes) and its easing. Press Replay to watch it again in the editor.
Entrance effect
A one-shot effect when the item comes into view: fades, slides, scales, blur, flip, and 3D effects. Set Plays (when scrolled into view, or when the page loads), a delay and duration, and whether it plays only the first time. Some effects have extra settings:
| Effect | Extra settings |
|---|---|
| Parallax / Parallax+ | Depth strength - how far it moves in depth as you scroll. |
| Tilt 3D | Tilts towards the mouse pointer. Tilt angle (up to 20°) and Grow on hover. |
| Rotate 3D | Axis (flip forward, turn sideways, spin flat) and direction. |
| Static 3D | A fixed 3D angle: tilt forward, turn sideways, rotate flat, push back or forward. |
Loop
| Loop | What it does |
|---|---|
| Float up and down | Drifts up 14px and back. |
| Spin | One full turn per loop. |
| Pulse | Grows a little and brightens, then settles. |
| Glowing halo | A soft coloured shadow that breathes - pick its colour. |
| Blink | On, off. For a cursor or a “live” dot. |
| Scroll sideways | For a strip of names or words. Type the content twice in a row; the item is sized to its content automatically (“Fit width to the content”) so the loop is seamless. |
Set how long one loop takes, its speed curve, Start after and Play in reverse. Give several items the same loop with different start times so they don't move in step.
Making a page react: the Interact tab
Freeform pages can react to clicks without code, using values: named counters that start at 0. A click changes a value; other items show different text or colours depending on it. This is how carousels, tabs and flavour pickers are built.
Recipes
| Goal | How |
|---|---|
| Hero that arrives in sequence | Load intro “Fade up” on headline, subtitle and button, with waits of 0, 0.15 and 0.3s. |
| Section that reveals as you scroll | Scroll effect “Fade up” on each card, Starts 5%, Finishes 35%. |
| Big word that fills in letter by letter | Scroll effect “Split-text reveal” on a large headline. |
| Simple carousel | Two arrow buttons: When clicked → step “slide” by 1 / −1, back to 0 after 3. A caption: Show different text depending on “slide”. The background: Change colour depending on “slide”, with Fade smoothly on. |
| Brand strip that never stops | Add a full-width frame with Effects → Fade edges: Fade at both sides. Inside it, add one text item with the names typed twice in a row, ending with the same separator (“ACME · LUMEN · ORBITAL · ACME · LUMEN · ORBITAL · ”). Animate → Loop: Scroll sideways, 30-45s - this also fits the text’s width to its content and keeps it on one line, which is what makes the loop seamless. |