gsap-framer-scroll-animation

Editorial and source context

What this Skill does

Gsap Framer Scroll Animation is a source-indexed Agent Skill for development & engineering work. Based on the SKILL.md description, it focuses on use this skill whenever the user wants to build scroll animations, scroll effects, parallax,…. Use the linked GitHub file to confirm scope and prerequisites before enabling it.

What the author says

Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, useSpring, whileInView, variants). Use this skill even if the user just says "animate on scroll", "fade in as I scroll", "make it scroll like Apple", "parallax effect", "sticky section", "scroll progress bar", or "entrance animation". Also triggers for Copilot prompt patterns for GSAP or Framer Motion code generation. Pairs with the premium-frontend-ui skill for creative philosophy and design-level polish.

Compatibility and requirements

• Use an agent runtime that supports Agent Skills and the linked SKILL.md format.
• Confirm the source repository's tools, SDKs, and platform prerequisites for ui and frontend work.

How to install or import it

• Open the linked GitHub SKILL.md and review its scope and setup instructions.
• Install or import the skill using the agent runtime's documented workflow.
• Run a small, non-sensitive test and verify the output before broader use.

Permissions and risks

• Review every command, file path, network request, dependency, and credential scope before enabling it.
• GitHub stars indicate popularity, not safety or correctness; validate the source and test with non-sensitive data.

Example workflows

• Ask an AI agent to apply Gsap Framer Scroll Animation to ui and frontend work described in the source record.
• Have the agent state assumptions, required tools, and expected output before using this development & engineering skill.
• Compare the result with the linked GitHub SKILL.md and verify it against your project requirements.