Skip to content

Defaults

Setup

Set defaults in the settings. There are two, and both apply on their own once saved; nothing on the page refers to them.

Timeline defaults

Timeline defaults are options for every timeline: the tl timelines you declare and the one Motion creates for each animated element outside them. They use the timeline syntax:

  • defaults: followed by animation options sets them for every animation in the timeline. defaults:ease-power2.inOut|duration-0.6 gives every animation that ease and duration unless it sets its own.
  • A plain option-value pair, such as repeat-1, is an option of the timeline itself.

Separate several parts with spaces. Options a tl element sets itself win over the timeline defaults.

Element defaults

Element defaults are animation parts every animated element starts from, written like an element’s own animation without the class prefix, such as from:opacity-0|y-20. The element’s own parts override them, so with those defaults animate-from:y-50 still fades in and moves 50 pixels rather than 20.

ScrollTrigger

Timeline defaults are the place to give every animation a scroll trigger. To start each animation when its element scrolls into view, set the timeline defaults to:

Text
scrollTrigger:trigger-[&]|scrub-true

& is resolved per element, so each element triggers its own animation, and scrub-true ties its progress to the scroll position.

Stay in the Loop!  

Be the first to hear about new updates, special offers, and helpful tips, delivered straight to your inbox.

We respect your inbox (and your privacy). Read our privacy policy.