INSANE web animation in Figma (File Included), by AyzZ on YouTube. 26 min 49 s.
- Video length
- 26 min 49 s
- Time to do it
- 1 hour
- Difficulty
- Medium
- Steps
- 9
What you need
Steps
Create a frame at your site width, for example 1440 by 900 pixels. Place the hero headline, subtext, button and image on separate, clearly named layers.
Turn the elements you want to move into their own frames or components. Give each one a name you will recognise in the timeline, such as hero-title or hero-card.
Open the Figma Motion timeline for your frame. Set the playhead at 0 seconds and add your first keyframe so you have a starting state for every layer.
For the first animation, move the playhead to about 0.6 seconds and add a second keyframe. Change position, scale or opacity, then set the easing to ease-out.
For the scroll animation, attach the layer to scroll position instead of time. Set a start and end offset so the movement begins after the hero enters the viewport.
For the path animation, draw a vector path with the pen tool. Keyframe the stroke offset or a layer moving along the path from start to finish.
For the text reveal, split the headline into lines or letters on separate layers. Add the same keyframe to each and stagger the delays by 0.05 seconds for a smooth cascade.
Press Present to preview the frame. Watch the loop a few times and adjust durations, delays and easing until the motion feels calm rather than rushed.
Export the animation as a video or GIF from the export options, then share the file or clip with your developer alongside notes on timings.
Tips and common mistakes
Keep interface animations between 200 and 600 milliseconds so they feel responsive rather than slow.
Use ease-out for things entering the screen and ease-in for things leaving it.
Name every layer before you animate, otherwise the timeline fills with unnamed frames you cannot tell apart.
Preview at full size, because motion that looks fine in a small window often feels wrong on a wide screen.
Questions
Do I need to know how to code to do this?
No. Everything here happens inside Figma using keyframes and the motion timeline. You export a video or share the file, and a developer rebuilds the timing in code later.
Is Figma Motion a separate paid tool?
It runs inside Figma, so you need a Figma account and access to the motion features or plugin. Check your plan, since some motion and export options may sit behind a paid tier.
Can I export the animation as an MP4?
Figma can export animated frames as a video or GIF depending on your setup. If MP4 is not offered, export a GIF or record the preview, then convert it.
This guide was drafted from the video's details and general task knowledge. It has not been checked against the full video. Check the video and relevant product instructions before following a procedure. Report a correction.
