skills.rest
BamoJ
BamoJCOMMUNITY
Explore all skills by this author →
Website𝕏@bamojkGitHub

scroll-anim

Create scroll-driven animations on DOM elements using GSAP, ScrollTrigger, and SplitText.

Updated Feb 13, 2026
Search Tags:#frontend#web design#animation#ux#gsap#scroll
One-click install
npx skills add https://github.com/BamoJ/playfight-2k26 --skill scroll-anim
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-anim
Source: https://github.com/BamoJ/playfight-2k26/tree/main/.claude/skills/scroll-anim
Command: npx skills add https://github.com/BamoJ/playfight-2k26 --skill scroll-anim

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill automates the process of adding dynamic scroll-driven animations to web page elements, enhancing user engagement and visual appeal without manual coding for each animation.

Core Features & Use Cases

  • Scroll-Triggered Animations: Easily create animations that play as users scroll down a page.
  • Pre-built Animation Types: Utilizes GSAP, ScrollTrigger, and SplitText for various effects like fades, reveals, parallax, and text animations.
  • Customizable Animations: Provides a base class for creating unique scroll animations tailored to specific design needs.
  • Use Case: Add a "fade-in" effect to images and text blocks as they enter the viewport, or create a parallax scrolling effect for background elements.

Quick Start

Apply a fade-in animation to the element with the class 'hero-title'.

Frequently Asked Questions about scroll-anim

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

FAQPage Schema
How do I trigger DOM element animations on scroll?▼

You can trigger DOM element animations on scroll using GSAP and ScrollTrigger. This Skill configures scroll-driven animations via data attributes, enabling reveal effects and parallax scrolling without manual coding for each element.

What is the best way to create parallax scrolling effects without writing custom animation code?▼

The best way to create parallax scrolling effects without custom code is using GSAP and ScrollTrigger integration. This Skill automates dynamic visual effects configuration through data attributes, bypassing the need for manual animation scripting.

Does this scroll animation approach work with existing web frameworks?▼

Yes, scroll animations work with existing web frameworks. The Skill integrates seamlessly by leveraging data attributes for animation configuration, allowing GSAP and ScrollTrigger to function within your current web design environment.

Can I customize pre-built scroll animations like fades and reveals?▼

Yes, you can customize pre-built scroll animations like fades and reveals. The Skill provides a base class for creating unique scroll animations tailored to specific web design needs using GSAP, ScrollTrigger, and SplitText.

How do I animate text blocks as they enter the viewport?▼

You animate text blocks entering the viewport using GSAP and SplitText. This Skill facilitates dynamic text effects and reveal animations, applying configurations through data attributes as users scroll down the page.

Why use data attributes for scroll-driven animations instead of manual GSAP scripting?▼

Using data attributes for scroll-driven animations eliminates manual GSAP scripting for each element. This approach automates visual effect management, allowing you to apply fades and parallax reveals directly within the DOM structure.

Related Skills

Explore More Design & Creative Skills→
wubq511wubq511
6

gsap-plugins

Register GSAP plugins for scroll, SVG, and draggable animations.

Community
Advanced
saschadudkin-sketchsaschadudkin-sketch

overdrive

Integrate shaders, physics simulations, scroll-driven effects, and high-performance animations into web interfaces.

Community
Advanced
ayofemiadeayofemiade

gsap-scrolltrigger

Create scroll-driven web animations with GSAP and ScrollTrigger.

Community
Advanced
markus41markus41
18

Scroll Animations Skill

Implement scroll-triggered animations and parallax effects with Framer Motion or GSAP.

Community
Intermediate