gsap-framer-scroll-animation
Build scroll animations, scroll effects, parallax, scroll-triggered reveals
by githubFree
Description
gsap-framer-scroll-animation is an agent skill from the github/awesome-copilot collection that builds production-grade scroll animations in the browser, using GSAP and Framer Motion. It covers scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll and text animation, and it comes with ready-to-use code recipes and deeper API references. A quick selector helps choose the library: GSAP suits vanilla JavaScript, Webflow and Vue, and handles pinning, horizontal scroll and complex timelines, while Framer Motion suits React and Next.js with a declarative style and whileInView entrance animations. It notes how the two can be used together in one Next.js app. The skill states that it provides the technical implementation, and that the creative choices of when and how much to animate come from a separate design skill, premium-frontend-ui, which should be read alongside it. The skill is useful for front-end developers who want motion that is smooth and does not break the page. Scroll animations can cause motion sickness for some visitors, so animation should respect the reduced-motion preference, and performance should be checked on a low-powered phone before release. The skill is installed with the skills CLI from the github/awesome-copilot repository. Its skills.sh page showed about 3.8K installs and passing results from three security audits at the time of the scan.…
Highlights
- Scroll effects, parallax and scroll-triggered reveals
- Pinned sections and horizontal scroll
- GSAP and Framer Motion recipes
- Quick library selector
- Pairs with a separate design skill
- Installs with the skills CLI
Ratings & Reviews
No ratings yet
Be the first to rate gsap-framer-scroll-animation.
People also visit
gsap-framer-scroll-animation FAQ
Which library should I use?
GSAP for vanilla JavaScript, Webflow and Vue, and for pinning or horizontal scroll. Framer Motion for React and Next.js.
Can I use both?
Yes. The skill includes notes on using both in one Next.js app.
Does it decide the design?
No. It covers implementation, and the creative direction comes from the separate premium-frontend-ui skill.
Should I think about motion sensitivity?
Yes. Respect the reduced-motion preference, since scroll animation can cause discomfort for some people.
How do I install it?
Run npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation.
What security audits does it have?
skills.sh lists three audits: Gen Agent Trust Hub Pass, Socket Pass and Snyk Pass.
What are the best gsap-framer-scroll-animation alternatives?
Popular alternatives to gsap-framer-scroll-animation include angular-migration, visual-edit-precision and premium-frontend-ui. See all gsap-framer-scroll-animation alternatives