Motion and effects

Select an element and open Advanced → Motion.

northline-plumbing.example/?nativeai=edit

Entrance animations#

Twelve animations: Fade in, Fade up, Fade down, Fade from right, Fade from left, Slide up, Zoom in, Zoom out, Blur in, Flip up, Scale in (subtle) and Reveal (wipe up). For each, choose:

• When — when it’s scrolled into view, or when the page loads.
• Duration, delay (100–1000 ms) and easing — Smooth, Ease out, Ease in-out, Spring or Linear.
• Distance it travels and the opacity it starts from.
• Once, or every time it scrolls into view.
• For containers, stagger — their children animate one after another.

Hover effects#

Lift, Grow, Shrink, Shadow, Glow, Tilt, Zoom image inside, Grayscale to color, Brighten and Dim.

Parallax#

The element moves slower than the page as it scrolls: Subtle, Medium or Strong.

Good to know#

• Visitors whose device asks for reduced motion see the elements without movement.
• Elements are only hidden before their animation while the page’s scripts run, with a short safety net, so content never stays invisible. The canvas always shows the final state.
• The motion script that plays all of this is about 1 KB.
• For more — exits, attention seekers, sequences, animations triggered by clicks — use Interactions.