gsap
Create professional GSAP animations for video
Writing GSAP animations for video compositions requires precise timing and deterministic execution. This skill provides comprehensive GSAP documentation and drop-in effects for HyperFrames, enabling you to create smooth, professional animations without searching through multiple resources.
Download the skill ZIP
Upload in Claude
Go to Settings → Capabilities → Skills → Upload skill
Toggle on and start using
Test it
Using "gsap". Animate .card elements with a stagger effect, 0.1s delay between each card, sliding in from the left
Expected outcome:
gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});
Using "gsap". Build a timeline where .logo fades in first, then .headline slides up, then .subtitle fades in after headline completes
Expected outcome:
const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');
Using "gsap". Type 'Welcome' at 12 characters per second with cursor '|' that blinks between solid and blinking states
Expected outcome:
const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);
Security Audit
Low RiskStatic analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.
High Risk Issues (2)
Medium Risk Issues (1)
Low Risk Issues (2)
Risk Factors
⚡ Contains scripts (1)
📁 Filesystem access (1)
⚙️ External commands (1)
Quality Score
What You Can Build
Add entrance animations to video overlays
Create fade-in, slide, or scale entrance animations for text overlays and UI elements in video compositions.
Build audio-reactive visualizers
Create canvas-based audio visualizers that respond to music or speech in video backgrounds.
Sequence complex multi-step animations
Coordinate multiple animations with precise timing using GSAP timelines, labels, and position parameters.
Try These Prompts
Use GSAP to animate #hero element fading in and sliding up 100px. Duration 0.6s with power2.out easing.
Create a GSAP timeline that: 1) fades in .title, 2) fades in .subtitle 0.2s after, 3) scales in .button at 0.5s. Use position parameters, not delay.
Create a typewriter animation for #message that types at 10 characters per second with a blinking cursor. Cursor should blink when idle.
Render audio frame [FRAME] with bars using AUDIO_DATA.frames[0].bands array. Each band maps to a canvas rectangle. Bass drives scale, treble drives opacity.
Best Practices
- Use transform properties (x, y, scale, rotation) instead of layout properties for GPU acceleration
- Pass defaults to timeline constructor rather than chaining with delay for readability
- Store tween and timeline return values when you need to control playback programmatically
Avoid
- Do not animate width, height, top, or left when transforms can achieve the same effect
- Do not chain tweens with delay when a timeline with position parameters sequences them better
- Do not create tweens targeting elements that do not yet exist in the DOM