animate

Name: animate
Availability: InStock
Author: TekLabsVN

Orchestrate GSAP-powered animations across components, pages, or entire sites.

1|Updated Mar 20, 2026

Search Tags:#animation #gsap #web-ui #lenis #scrolltrigger #splittext

Ready to run

npx skills add https://github.com/TekLabsVN/claude-skills --skill animate-teklabsvn

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: animate
Source: https://github.com/TekLabsVN/claude-skills/tree/main/animate
Command: npx skills add https://github.com/TekLabsVN/claude-skills --skill animate-teklabsvn

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Orchestrates GSAP-powered animations across components, pages, or an entire site to deliver polished motion.

Core Features & Use Cases

Coordinated load sequences and page transitions for cohesive UI experiences.
Scroll-triggered effects and parallax motion to enhance storytelling.
Hero text animation with SplitText and responsive timing for accessible design.
Enforces prefers-reduced-motion and integrates Lenis for smooth scrolling when desired.

Quick Start

Define your animation map and implement GSAP timelines, starting with a load sequence and progressively adding scroll and interaction effects.

Frequently Asked Questions about animate

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I orchestrate GSAP animations across an entire site?▼

To orchestrate GSAP animations across a site, define an animation map first, then implement GSAP timelines starting with load sequences before progressively adding scroll and interaction effects for cohesive UI motion.

What is the best way to animate hero text with SplitText?▼

Animating hero text with SplitText requires integrating GSAP timelines and responsive timing to deliver polished motion while enforcing prefers-reduced-motion for accessible design.

Does GSAP work with Lenis for smooth scrolling?▼

GSAP works with Lenis for smooth scrolling, combining ScrollTrigger effects and parallax motion to enhance storytelling across web interfaces requiring coordinated load sequences.

How do I set up scroll-triggered effects and parallax motion?▼

Setting up scroll-triggered effects and parallax motion involves using GSAP ScrollTrigger and integrating Lenis for smooth scrolling to enhance storytelling across your web interfaces.

Can I use GSAP animations while respecting prefers-reduced-motion?▼

You can use GSAP animations while respecting prefers-reduced-motion because the orchestration process explicitly enforces this accessibility standard during hero text animation and scroll-triggered effects.