Interactions animate with GSAP. Each tween has a duration and a GSAP ease (power1–3.out, back.out, elastic.out, expo.out, sine.inOut, none), with optional stagger, loop, and yoyo.
Where: Right sidebar → Interactions → interaction popover → Playback — Open an interaction and edit its playback
Key ideas
- GSAP eases: Use GSAP names: power1.out / power2.out / power3.out (entrance), power2.in (exit), back.out(1.7), elastic.out(1,0.3), expo.out, sine.inOut, none.
- Duration guidance: Micro-interactions 200–350ms; entrances 500–800ms.
- Stagger / loop / yoyo: stagger { each, from: first/center/end } for siblings; loop to repeat; yoyo to reverse (hover defaults to yoyo:true).
Steps
- Open an interaction and find the Playback options in its popover.
- Set duration (ms) and pick a GSAP ease.
- For multiple siblings, add a stagger with an each value and a from origin.
- Enable loop/yoyo for continuous or reversible motion.