# Animation Sync

_Sound for Motion · Sound Kit for Figma · Sound Kit Pro_

> Match the length, the curve and the moment

A 400 ms slide with a 900 ms whoosh feels broken — but so does a clip of exactly the right length whose attack lands 80 ms after the motion peaks. Animation Sync fixes all three: it stretches the clip to the animation’s duration, applies that animation’s easing as the sound’s gain envelope, and moves the attack transient onto the instant the motion is moving fastest.

## What it gives you

- **Stretched to the duration** — Time-stretches the clip to the target length, with the ratio shown live before you commit — or take a preset (Fast 150, Default 300, Modal 400, Slow 500 ms).
- **The animation’s own curve** — The easing becomes the sound’s gain envelope, following the exact custom cubic-bezier or spring when the transition carries one, not just the nearest family.
- **Transient on the peak** — The panel reads where your attack actually is and where the animation peaks — the start for an ease-out, the end for an ease-in, the first impact for a bounce — then pads or trims the head to put one on the other. It never cuts into the attack, and never touches the decay.

## How to use it

1. Select the animated layer and open the Motion tab.
2. Adopt its timing with Apply on the Motion Sync banner — that pre-fills the target duration, easing, bounce and trigger.
3. Open the sound in Create → Edit and use Animation Sync to stretch it to that duration.
4. Read the Transient rows — “Attack at” versus “Motion peaks at” — and align them with one click.

## Links

- [This feature](https://systergon.com/sound-kit/features/sync-to-animation)
- [All Sound Kit features](https://systergon.com/sound-kit/features)
- Install the Sound Kit plugin: https://www.figma.com/community/plugin/1398310751744117050