Skip to main content

Combining animations

An element can play more than one entrance or ScrollTrigger animation at once — add a second row to the same Animations list instead of picking only one. Two animations combine cleanly when they don't move the same CSS property at the same time; two that do will fight each other and only the last one applied wins.

What combines well​

  • A shape animation with a fade: Zoom or Slide with Fade.
  • A clip-path reveal with a slide and a fade: Sweep, Circle or Fan with Slide and Fade.
  • A clip-path reveal with a zoom and a fade: Sweep, Circle or Fan with Zoom and Fade.
  • Ring (or Border, on its own) with a clip-path reveal, a slide and a fade.

What doesn't combine​

  • Zoom, Slide, Bounce and Rotate never combine with each other — all four move the element with transform, and only the last one applied actually moves it.
    • Slide relative is the one exception: it's a separate set of classes built specifically to pair with another transform animation. Where plain Slide moves the element itself, Slide relative moves it by a percentage of the screen instead, so it doesn't collide. Keep in mind it adds position: relative to the element.
  • Sweep, Fan and Circle never combine with each other — all three reveal the element with clip-path, and only the last one applied wins.
  • Border never combines with anything else, and only reads well on elements with square (or only slightly rounded) corners — it animates a line around the element's own edge with ::before/::after, which a heavy border-radius distorts.

How to add a second animation​

Style tab → Entrance Animations (or ScrollTrigger Animations) → Add Animation again. Each row in the list applies its own class to the element.

See Animation CSS properties for the full property-by-property breakdown this page's rules come from.