About this skill
The official core skill from GreenSock. It teaches correct use of tweens, easing, stagger and reduced motion, so the agent's animation feels designed. It is the base layer under most code-made motion graphics.
You say
Animate this headline in with a staggered reveal, and respect reduced motion.
How it works
- Your agent loads GreenSock's own guidance when a task involves animation.
- It chooses the right tween, easing and stagger, and animates transforms and opacity first for smooth motion.
- It writes timelines you can pause and seek, and respects a visitor's reduced motion setting.
Getting a good result
- Ask for a timeline when several things move together, since each step can then be retimed on its own.
- Pair it with HyperFrames when you want the animation as a video file, because a seekable timeline renders exactly.
- Read GSAP's own license before shipping. The skill is MIT, while GSAP is free under GreenSock's terms.
What you get
- The official gsap-core skill at a pinned commit
- The MIT license and attribution
Good fit
- Web animation
- HTML video with HyperFrames
Not for
- 3D scenes
- Rendering a video on its own
How to install it
- Download the ZIP and unzip it.
- Move the folder holding
SKILL.mdinto your agent's skills folder, such as~/.claude/skills/for Claude Code. - Start a new session and ask for what you want to make.
Needs: An agent that reads skills, GSAP.
FAQ
Is it really free?
Yes. Create a free AdAnt account to download the ZIP. There is no card and no trial timer.
Is GSAP open source?
The skill is MIT. GSAP itself is free of charge under GreenSock's own license, which is not open source and has conditions.
Related skills
HyperFrames: HTML to Video
Have Claude write launch films, explainers and title cards as HTML, then render them to MP4.
Vertical Ad Motion Graphics
Direct and build a 9:16 motion graphics ad that works on mute, with no footage.
Three.js Animation
Add keyframes, procedural motion and clip blending to 3D scenes made with code.