Open your
GSAP page.
Import the HTML or paste it in. GSAP and its plugins load from cdnjs, jsDelivr or unpkg without any setup.
GSAP ANIMATION TO VIDEO
Render GSAP timelines
to 4K video.
Export GSAP animations as MP4, MOV or WebM, frame by frame. Keep your timeline as it is, or seek it from a render hook for frame-perfect results.
How to export a GSAP animation as video
Open your
Set the length
to the timeline.
Use the duration of your master timeline, for example tl.duration(), as the video length.
Optional:
add a hook.
Pause the timeline and seek it in renderFrame. Frames render in any order, so long videos can render in parallel parts.
Export
the video.
Render an MP4 for sharing, or ProRes 4444 MOV with transparency for compositing in Premiere Pro or DaVinci Resolve.
Frame-perfect GSAP with a renderFrame hook
Without a hook, the studio replays the timeline on a fixed clock. With a hook, every frame is an exact seek:
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script>
const tl = gsap.timeline({ paused: true });
tl.from('.logo', { scale: 0, rotation: -90, duration: 1, ease: 'back.out(1.7)' })
.from('.tagline', { y: 60, opacity: 0, duration: .8 }, '-=.3');
// The studio calls this for every frame, with the time in seconds.
window.renderFrame = (time) => { tl.seek(time, false); };
renderFrame(0, 0);
</script>Tips for GSAP video exports
- Use one master timeline. Nest your timelines in one parent so a single
seeksets the whole scene. - Drive scroll scenes by time. ScrollTrigger and mouse effects need a scroll or a pointer. For video, put the same tweens on a time-based timeline.
- Pick random values once. Work out random positions when the page loads, not inside tweens that run per frame, so every render looks the same.
- Split text after fonts load. Run SplitText after
document.fonts.readyso lines break the same way in every frame.
Export formats for GSAP motion
| Format | Best for | Transparency |
|---|---|---|
| MP4 (H.264) | YouTube, social media, websites, presentations | No |
| MOV (ProRes 4444) | Premiere Pro, DaVinci Resolve, Final Cut, After Effects | Yes |
| WebM (VP9) | Web pages and lightweight overlays | Yes |
| PNG sequence | Compositing and frame-by-frame editing | Yes |
GSAP to video questions
Do I have to change my GSAP code?
No. Most GSAP animations render as they are. Adding a renderFrame hook that seeks a paused timeline is optional and gives exact, repeatable frames.
Do GSAP plugins work?
Yes. Plugins such as MotionPathPlugin, DrawSVGPlugin, MorphSVGPlugin and SplitText work when they are loaded in the page.
Can I export a GSAP animation with a transparent background?
Yes. Keep the page background transparent, turn on transparency and export ProRes 4444 MOV, WebM or a PNG sequence.
Why not record the screen with OBS?
Screen recording depends on your PC keeping up in real time and is limited to your screen size. The studio renders each frame at the export size, so 4K GSAP motion stays smooth.
More ways to make video from code
Try it free for 7 days.
Free download from the Microsoft Store. No payment card needed for the trial.