For coordinated, ms-precise choreography, the timeline interaction sequences multiple tweens with overlaps and position offsets.
Where: Right sidebar → Interactions → timeline animation — Author a timeline interaction
Key ideas
- Timeline vs simple: A timeline coordinates many tweens with position offsets ("<", "+=0.5"); simple is a single tween per trigger.
- GSAP-backed: Tweens compile to GSAP from/to/fromTo with eases and stagger.
Steps
- Add a timeline interaction.
- Add tweens for each target with durations and eases.
- Set position offsets to overlap or sequence them.
- Scrub/preview the full timeline.
Position syntax
- Absolute positions place a tween at a fixed timeline time.
- Relative positions such as +=0.5 delay from the prior end.
- The < position aligns with the previous tween start so actions overlap.
- Labels/consistent offsets make a long sequence easier to maintain.
Tween design
For each target, choose from/to/fromTo values, duration, easing, and optional stagger. Preview the complete trigger path, including replay/reverse behavior, rather than judging isolated tweens.
System clipboard and shared presets
Timeline keyframes use the system clipboard, so later copies in other apps take precedence. Focus and Studio share searchable motion presets with duration and Clip edge/Playhead placement. Negative keyframe handling and first-frame sets after timeline construction are corrected.
Tips
- Animate transform/opacity where possible for smoother rendering.
- Use stagger for repeated children and keep the selector/target scope explicit.