Skip to content

Settings

Configuration → Content authoring → Canvas Builder → Styles → Animation

  • Effects — the vocabulary offered in the panel. Each carries a label and the bundle of values it applies, plus two optional keys:
    • requires — a detector the target must satisfy for the effect to be offered. svg needs artwork with strokes; multiple needs the target to resolve to more than one element.
    • family — the engine feature the effect belongs to (draw, declared, …). The active engine builds every family in, so a preset never names a library.
  • Easings and Repeat options — the choices the panel lists.
  • Ranges — the slider bounds (max distance, max delay + duration, stagger and repeat-delay ceilings and steps).
  • Defaults — the value every unset key falls back to, site-wide.
  • Smooth scrolling — eases the whole page behind the scroll wheel (via Lenis). Off by default. See below.

A component's effective default is the site default overlaid with the effect it chose, so what the panel shows is what will actually play.

Smooth scrolling

Lenis smooths the page's real native scroll directly rather than transforming a wrapper/content pair, so there is no risk of a position: fixed descendant (an admin toolbar, a sticky header) ending up positioned against the wrong ancestor. No template change is needed anywhere.

Smoothing never applies on an admin route, in the editor, inside a preview iframe, or for a visitor who asked for reduced motion. The iframe test is "am I the top window" rather than a path check, because Page Preview renders the published path inside an iframe.

Lenis itself loads from the jsDelivr CDN — a script-src policy that omits cdn.jsdelivr.net disables smooth scrolling specifically (the page just scrolls normally; every other Motion feature is unaffected, since the animation engine itself loads nothing from a CDN).