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.
Duration, ease, and stagger
- Duration is expressed in milliseconds in this guide; the selected interaction/runtime stores the corresponding tween timing.
- GSAP ease names control acceleration/deceleration; power, sine, expo, back, elastic, and none produce different motion profiles.
- Stagger applies timing offsets across sibling targets and can originate from the first, center, or end of the set.
Repeat and reverse behavior
- Loop repeats the tween; yoyo reverses it at each repeat boundary.
- Hover interactions commonly use yoyo so the element returns when the pointer leaves, but verify the actual interaction configuration.
- Keep repeated movement subtle and ensure a stable resting state when the interaction stops.
Tips
- Choose duration before fine-tuning easing; compare the same movement with one ease at a time.
Limitations and important notes
- Available controls depend on interaction type; a specialized media or scroll interaction may not expose the same tween options.