New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Scroll Reveal Libraries

by freshtechbro in freshtechbro/claudedesignskills

Simple scroll-triggered reveal animations using AOS (Animate On Scroll).

MITAuto-check passedFrontend & Design

Install Scroll Reveal Libraries

skills CLI
$ npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install freshtechbro/claudedesignskills scroll-reveal-libraries --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/freshtechbro/claudedesignskills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/scroll-reveal-libraries .claude/skills/scroll-reveal-libraries && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
scroll-reveal-libraries
GitHub stars
994
Token cost
~4.3k tokens
SKILL.md length
639 words
Files
6 (incl. scripts, references, assets)
Skills in repo
19
Repo updated
First seen
Licence
MIT

At a glance

Simple scroll-triggered reveal animations using AOS (Animate On Scroll).

  • Works in 12 steps: Landing Page Hero Section → Feature Cards Grid → Alternating Content Sections → …
  • Building marketing pages
  • SKILL.md covers Overview, Core Concepts, Common Patterns and Integration Patterns, plus 2 more sections
  • Runs Python scripts from its folder; calls npm and yarn; reaches unpkg.com

What it does

Scroll Reveal Libraries is an agent skill from freshtechbro/claudedesignskills. Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.

Its SKILL.md is about 4.3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 8 other files, including scripts, reference files and assets (for example `assets/README.md`, `references/animation_catalog.md` and `references/aos_api.md`).

It sits in Frontend & Design, covering Web animation and motion, Landing pages and Slides and decks. It works with React, GSAP and Motion. The repository describes itself as: A comprehensive collection of Claude Code skills for modern web development, specializing in 3D graphics, animation, and interactive web experiences. The licence is MIT.

When your agent uses it

  • Building marketing pages
  • Content-heavy sites requiring basic fade/slide effects without complex animation orchestration
  • Tasks involving scroll animations
  • Scroll-triggered reveals

Example prompts

  • “/scroll-reveal-libraries”

Requirements

  • Python 3
  • Node.js

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. Landing Page Hero Section
  2. Feature Cards Grid
  3. Alternating Content Sections
  4. Scroll-Triggered Testimonials
  5. Custom Anchor Triggers
  6. Sequential Animation Chain
  7. Image Gallery with Zoom Effects
  8. Disable on Mobile Devices
  9. Use Once for Better Performance
  10. Optimize Throttle and Debounce
  11. Disable Mutation Observer for Static Content
  12. Reduce Animation Complexity

What it can do on your machine

Read from SKILL.md and the folder at commit 1da73fe. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships 2 files in scripts/ (Python), which the agent can run.

    Shell commands in SKILL.md call:

    • npm
    • yarn

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Hosts in commands or code, which the agent is likely to contact:

    • unpkg.com

    Also links to:

    • michalsnik.github.io
    • github.com

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Scroll Reveal Libraries loads about 4.3k tokens when it runs, and up to ~11k if it reads all its reference files. Until then it costs about 129 tokens; SKILL.md has 639 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~129
When it runs · the whole SKILL.md, loaded when a task matches
~4.3k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~11k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.

SKILL.md

The full file from freshtechbro/claudedesignskills at commit 1da73fe, republished under its MIT licence (© freshtechbro). 639 words, ~4,278 tokens.

Download SKILL.mdSave it as .claude/skills/scroll-reveal-libraries/SKILL.md (or your agent's skills folder). This skill also uses 5 other files; get the full folder from GitHub.
name
scroll-reveal-libraries
description
Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide effects without complex animation orchestration. Triggers on tasks involving scroll animations, scroll-triggered reveals, AOS, simple animations, or basic scroll effects. Alternative to GSAP ScrollTrigger and Locomotive Scroll for simpler use cases. Compare with motion-framer for React-specific animations.

Scroll Reveal Libraries

Overview

This skill covers AOS (Animate On Scroll), a lightweight CSS-driven library for scroll-triggered animations. AOS excels at simple fade, slide, and zoom effects activated when elements enter the viewport.

Key Features:

  • Minimal Setup: Single JavaScript file + CSS
  • Data Attribute API: Configure animations in HTML
  • Performance: CSS-driven, GPU-accelerated animations
  • 50+ Built-in Animations: Fades, slides, zooms, flips
  • Framework Agnostic: Works with vanilla JS, React, Vue, etc.

When to Use:

  • Marketing/landing pages with simple scroll effects
  • Content-heavy sites (blogs, documentation)
  • Quick prototypes requiring scroll animations
  • Projects where GSAP/Framer Motion complexity isn't needed

When NOT to Use:

  • Complex animation timelines or orchestration → Use GSAP ScrollTrigger
  • Physics-based animations → Use React Spring or Framer Motion
  • Precise scroll-synced animations → Use GSAP ScrollTrigger
  • Heavy interactive animations → Use Framer Motion

Core Concepts

Installation

CDN (Quickest):

html
<head>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
  <!-- Content with data-aos attributes -->

  <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>
</body>

NPM/Yarn (Recommended):

bash
npm install aos@next
# or
yarn add aos@next
javascript
import AOS from 'aos';
import 'aos/dist/aos.css';

AOS.init();
Basic Usage

Apply animations using the data-aos attribute:

html
<!-- Fade in -->
<div data-aos="fade-in">Content</div>

<!-- Fade up -->
<div data-aos="fade-up">Content</div>

<!-- Slide from right -->
<div data-aos="slide-left">Content</div>

<!-- Zoom in -->
<div data-aos="zoom-in">Content</div>
Configuration Options

Global Configuration:

javascript
AOS.init({
  // Animation settings
  duration: 800,  // Animation duration (ms): 0-3000
  delay: 0,       // Delay before animation (ms): 0-3000
  offset: 120,    // Offset from trigger point (px)
  easing: 'ease', // Easing function
  once: false,    // Animate only once (true) or every time (false)
  mirror: false,  // Animate out when scrolling past

  // Placement
  anchorPlacement: 'top-bottom', // Which position triggers animation

  // Performance
  disable: false,                // Disable on mobile/tablet
  startEvent: 'DOMContentLoaded', // Initialization event
  debounceDelay: 50,             // Window resize debounce
  throttleDelay: 99              // Scroll throttle
});

Per-Element Overrides:

html
<div
  data-aos="fade-up"
  data-aos-duration="1000"
  data-aos-delay="200"
  data-aos-offset="50"
  data-aos-easing="ease-in-out"
  data-aos-once="true"
  data-aos-mirror="true"
  data-aos-anchor-placement="center-bottom"
>
  Custom configured element
</div>

Common Patterns

1. Landing Page Hero Section
html
<section class="hero">
  <!-- Staggered heading words -->
  <h1
    data-aos="fade-down"
    data-aos-duration="800"
  >
    Welcome to the Future
  </h1>

  <!-- Delayed subheading -->
  <p
    data-aos="fade-up"
    data-aos-delay="200"
    data-aos-duration="600"
  >
    Transform your ideas into reality
  </p>

  <!-- CTA button -->
  <button
    data-aos="zoom-in"
    data-aos-delay="400"
    data-aos-duration="500"
  >
    Get Started
  </button>
</section>
2. Feature Cards Grid
html
<div class="features-grid">
  <!-- Stagger cards with increasing delays -->
  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    <h3>Feature 1</h3>
    <p>Description...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="100"
  >
    <h3>Feature 2</h3>
    <p>Description...</p>
  </div>

  <div
    class="feature-card"
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    <h3>Feature 3</h3>
    <p>Description...</p>
  </div>
</div>
3. Alternating Content Sections
html
<!-- Content from left -->
<div class="section">
  <div
    class="content"
    data-aos="slide-right"
    data-aos-duration="800"
  >
    <h2>Section Title</h2>
    <p>Content slides in from left...</p>
  </div>
  <img
    src="image1.jpg"
    data-aos="fade-left"
    data-aos-delay="200"
  />
</div>

<!-- Content from right -->
<div class="section reverse">
  <img
    src="image2.jpg"
    data-aos="fade-right"
  />
  <div
    class="content"
    data-aos="slide-left"
    data-aos-duration="800"
    data-aos-delay="200"
  >
    <h2>Section Title</h2>
    <p>Content slides in from right...</p>
  </div>
</div>
4. Scroll-Triggered Testimonials
html
<div class="testimonials">
  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
  >
    <blockquote>"Amazing product!"</blockquote>
    <cite>- John Doe</cite>
  </div>

  <div
    class="testimonial"
    data-aos="zoom-in"
    data-aos-duration="500"
    data-aos-delay="100"
  >
    <blockquote>"Exceeded expectations"</blockquote>
    <cite>- Jane Smith</cite>
  </div>
</div>
5. Custom Anchor Triggers

Trigger animations based on a different element's scroll position:

html
<!-- Fixed sidebar animates based on main content scroll -->
<div class="main-content">
  <div id="trigger-point" data-aos-id="sidebar-trigger">
    <!-- Content -->
  </div>
</div>

<aside
  class="sidebar"
  data-aos="fade-left"
  data-aos-anchor="#trigger-point"
>
  Sidebar content
</aside>
6. Sequential Animation Chain
html
<div class="animation-sequence">
  <!-- Step 1: Heading -->
  <h2
    data-aos="fade-down"
    data-aos-duration="600"
    data-aos-delay="0"
  >
    Our Process
  </h2>

  <!-- Step 2: Description -->
  <p
    data-aos="fade-up"
    data-aos-duration="600"
    data-aos-delay="200"
  >
    Follow these simple steps
  </p>

  <!-- Step 3-5: Process cards -->
  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="400"
  >
    Step 1
  </div>

  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="600"
  >
    Step 2
  </div>

  <div
    class="process-step"
    data-aos="flip-left"
    data-aos-delay="800"
  >
    Step 3
  </div>
</div>
html
<div class="gallery">
  <img
    src="photo1.jpg"
    data-aos="zoom-in-up"
    data-aos-duration="800"
  />
  <img
    src="photo2.jpg"
    data-aos="zoom-in-up"
    data-aos-duration="800"
    data-aos-delay="100"
  />
  <img
    src="photo3.jpg"
    data-aos="zoom-in-up"
    data-aos-duration="800"
    data-aos-delay="200"
  />
</div>

Integration Patterns

React Integration

Basic Setup:

jsx
import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function App() {
  useEffect(() => {
    AOS.init({
      duration: 800,
      once: true,
      offset: 100
    });
  }, []);

  return (
    <div>
      <h1 data-aos="fade-down">Welcome</h1>
      <p data-aos="fade-up">Content here</p>
    </div>
  );
}

Refreshing on Route Changes:

jsx
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import AOS from 'aos';

function App() {
  const location = useLocation();

  useEffect(() => {
    AOS.init({ duration: 800 });
  }, []);

  // Refresh AOS on route change
  useEffect(() => {
    AOS.refresh();
  }, [location]);

  return <Routes>{/* routes */}</Routes>;
}

Dynamic Content Updates:

jsx
import { useState, useEffect } from 'react';
import AOS from 'aos';

function DynamicList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    AOS.init();
  }, []);

  const addItem = () => {
    setItems([...items, { id: Date.now(), text: 'New Item' }]);

    // Refresh AOS to detect new elements
    setTimeout(() => AOS.refresh(), 50);
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <ul>
        {items.map((item) => (
          <li key={item.id} data-aos="fade-in">
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

Component Wrapper Pattern:

jsx
import AOS from 'aos';
import 'aos/dist/aos.css';

function AnimatedSection({ children, animation = "fade-up", delay = 0, ...props }) {
  return (
    <div
      data-aos={animation}
      data-aos-delay={delay}
      {...props}
    >
      {children}
    </div>
  );
}

// Usage
<AnimatedSection animation="slide-right" delay={200}>
  <h2>Animated Content</h2>
</AnimatedSection>
Vue.js Integration
vue
<template>
  <div>
    <h1 data-aos="fade-down">Vue + AOS</h1>
    <div
      v-for="(item, index) in items"
      :key="item.id"
      data-aos="fade-up"
      :data-aos-delay="index * 100"
    >
      {{ item.text }}
    </div>
  </div>
</template>

<script>
import AOS from 'aos';
import 'aos/dist/aos.css';

export default {
  mounted() {
    AOS.init({ duration: 800 });
  },
  updated() {
    // Refresh when component updates
    this.$nextTick(() => {
      AOS.refresh();
    });
  },
  data() {
    return {
      items: [/*...*/]
    };
  }
};
</script>
Next.js Integration
jsx
// pages/_app.js
import { useEffect } from 'react';
import AOS from 'aos';
import 'aos/dist/aos.css';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    AOS.init({
      duration: 800,
      once: true
    });
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;
jsx
// pages/index.js
export default function Home() {
  return (
    <main>
      <h1 data-aos="fade-down">Next.js + AOS</h1>
      <p data-aos="fade-up">Server-side rendered content with animations</p>
    </main>
  );
}

Performance Optimization

1. Disable on Mobile Devices
javascript
AOS.init({
  disable: 'mobile', // Disable on mobile
  // Or use function for custom logic
  disable: function() {
    return window.innerWidth < 768;
  }
});
2. Use Once for Better Performance
javascript
AOS.init({
  once: true, // Animate only once (better performance)
  mirror: false // Don't animate out
});
3. Optimize Throttle and Debounce
javascript
AOS.init({
  throttleDelay: 99,  // Scroll event throttle (default)
  debounceDelay: 50   // Resize event debounce (default)
});
4. Disable Mutation Observer for Static Content
javascript
AOS.init({
  disableMutationObserver: true // Disable for fully static content
});
5. Reduce Animation Complexity
html
<!-- Simpler animations perform better -->
<div data-aos="fade-in">Simple fade</div>

<!-- Complex animations may cause jank -->
<div data-aos="flip-left">Complex flip</div>
6. Use RequestIdleCallback for Initialization
javascript
if ('requestIdleCallback' in window) {
  requestIdleCallback(() => {
    AOS.init({ duration: 800 });
  });
} else {
  AOS.init({ duration: 800 });
}

Common Pitfalls

1. Forgetting to Refresh After DOM Changes

Problem: New elements don't animate after being added dynamically.

Solution: Call AOS.refresh() or AOS.refreshHard():

javascript
// After adding elements to DOM
const newElement = document.createElement('div');
newElement.setAttribute('data-aos', 'fade-in');
container.appendChild(newElement);

// Refresh AOS
AOS.refresh(); // Recalculate positions
// or
AOS.refreshHard(); // Reinitialize completely
2. Animations Not Working in React

Problem: AOS doesn't detect elements on first render or route changes.

Solution: Initialize in useEffect and refresh on route/content changes:

jsx
useEffect(() => {
  AOS.init();
  return () => AOS.refresh(); // Cleanup
}, []);

useEffect(() => {
  AOS.refresh(); // Refresh on route change
}, [location.pathname]);
3. Scroll Performance Issues

Problem: Page scrolling feels janky with many animated elements.

Solution: Reduce animated elements and use once: true:

javascript
AOS.init({
  once: true, // Animate only once
  disable: window.innerWidth < 768 // Disable on mobile
});
4. CSS Conflicts

Problem: Custom CSS interferes with AOS animations.

Solution: Use more specific selectors and avoid !important:

css
/* Bad: Conflicts with AOS */
div {
  opacity: 1 !important;
}

/* Good: Specific selector */
.my-content > div {
  /* styles */
}
5. Anchor Placement Confusion

Problem: Animations trigger at unexpected scroll positions.

Solution: Understand anchor placement options:

javascript
// Triggers when element's top hits viewport bottom
data-aos-anchor-placement="top-bottom"

// Triggers when element's center hits viewport center
data-aos-anchor-placement="center-center"

// Triggers when element's bottom hits viewport top
data-aos-anchor-placement="bottom-top"
6. Duration/Delay Limits

Problem: Values above 3000ms don't work.

Solution: Add custom CSS for extended durations:

css
body[data-aos-duration='4000'] [data-aos],
[data-aos][data-aos][data-aos-duration='4000'] {
  transition-duration: 4000ms;
}
html
<div data-aos="fade-in" data-aos-duration="4000">
  Long animation
</div>

Built-in Animations

Fade Animations
  • fade-in - Simple fade in
  • fade-up - Fade in from bottom
  • fade-down - Fade in from top
  • fade-left - Fade in from right
  • fade-right - Fade in from left
  • fade-up-right - Diagonal fade
  • fade-up-left - Diagonal fade
  • fade-down-right - Diagonal fade
  • fade-down-left - Diagonal fade
Show full SKILL.md (238 more words)Show less
Slide Animations
  • slide-up - Slide from bottom
  • slide-down - Slide from top
  • slide-left - Slide from right
  • slide-right - Slide from left
Zoom Animations
  • zoom-in - Zoom in
  • zoom-in-up - Zoom in from bottom
  • zoom-in-down - Zoom in from top
  • zoom-in-left - Zoom in from right
  • zoom-in-right - Zoom in from left
  • zoom-out - Zoom out
  • zoom-out-up - Zoom out to top
  • zoom-out-down - Zoom out to bottom
  • zoom-out-left - Zoom out to left
  • zoom-out-right - Zoom out to right
Flip Animations
  • flip-up - Flip from bottom
  • flip-down - Flip from top
  • flip-left - Flip from right
  • flip-right - Flip from left

Custom Animations

Create custom animations with CSS:

css
[data-aos="custom-slide-bounce"] {
  opacity: 0;
  transform: translateY(100px);
  transition-property: transform, opacity;
}

[data-aos="custom-slide-bounce"].aos-animate {
  opacity: 1;
  transform: translateY(0);
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
html
<div data-aos="custom-slide-bounce">
  Custom animation
</div>

Comparison with Alternatives

AOS vs GSAP ScrollTrigger
FeatureAOSGSAP ScrollTrigger
ComplexitySimple, data-attribute basedAdvanced, JavaScript API
Use CaseSimple revealsComplex timelines
File Size~13KB~27KB (GSAP) + ScrollTrigger
PerformanceCSS-drivenJavaScript-driven
Learning CurveMinutesHours
CustomizationLimitedExtensive
Best ForMarketing pagesInteractive experiences

Use AOS when:

  • Simple fade/slide/zoom effects
  • Quick implementation needed
  • Minimal JavaScript preferred
  • Basic scroll reveals sufficient

Use GSAP ScrollTrigger when:

  • Complex animation sequences
  • Precise scroll-synced animations
  • Timeline orchestration needed
  • Advanced easing/physics required

Resources

Official Documentation
Key Scripts
  • scripts/aos_generator.py - Generate AOS HTML boilerplate
  • scripts/config_builder.py - Build AOS configuration
References
  • references/aos_api.md - Complete AOS API reference
  • references/animation_catalog.md - All built-in animations with demos
  • references/integration_patterns.md - Framework integration guides
Starter Assets
  • assets/starter_aos/ - Complete AOS starter template
  • assets/examples/ - Production-ready patterns
  • gsap-scrolltrigger: For complex scroll-driven animations
  • motion-framer: For React-specific animations with physics
  • locomotive-scroll: For smooth scrolling with parallax
  • animated-component-libraries: For pre-built animated React components

© freshtechbro, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 5 other files (scripts, references, assets) in .claude/skills/scroll-reveal-libraries of freshtechbro/claudedesignskills.

  • SKILL.md
  • assets/README.md
  • references/animation_catalog.md
  • references/aos_api.md
  • scripts/aos_generator.py
  • scripts/config_builder.py

Open the folder on GitHubat commit 1da73fe

Compare with similar skills

Scroll Reveal Libraries next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Scroll Reveal Libraries compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Scroll Reveal Libraries this skillfreshtechbro/claudedesignskills994—~4.3kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2611 repos~5.7kAutomated safety check: PassCustom licence
Silk Designbendrape1-byte/silk-design138—~1.8kAutomated safety check: PassMIT
Awwwards-Level React AnimationsHainrixz/editor-pro-max261—~4.4kAutomated safety check: PassCustom licence
Motiscope RecreateKumarSashank/motiscope122—~2kAutomated safety check: PassMIT
RecreateKumarSashank/motiscope122—~1.8kAutomated safety check: NotesMIT

Similar skills

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    261 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Silk Design

    bendrape1-byte/silk-design

    Build websites and web UI with smooth, polished, high-end motion by default — the buttery feel of premium sites, not static slop.

    138 GitHub stars~1.8k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Awwwards-Level React Animations

    Hainrixz/editor-pro-max

    Guides React animation work with GSAP, Motion, Anime.js and Lenis for scroll effects, page transitions, text effects and generative visuals, with a library decision table.

    261 GitHub stars~4.4k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check passed

  • Motiscope Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~2k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Recreate

    KumarSashank/motiscope

    Recreate an analyzed animation as working web code — GSAP (JavaScript), CSS/Web Animations, Framer Motion (React), or Lottie/SVG.

    122 GitHub stars~1.8k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check: notes

  • Gsap Framer Scroll Animation

    github/awesome-copilot

    Official

    A skill your agent uses whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion…

    40k GitHub starsUsed in 1 repo~1.6k tokens
    Frontend & DesignAuto-check passed

More from freshtechbro/claudedesignskills

All 19 skills in this repo

  • Anime.js Animation Guide

    freshtechbro/claudedesignskills

    Guides use of Anime.js for timeline sequences, stagger effects, SVG morphing and keyframe animation on DOM elements, CSS, SVG and JavaScript objects.

    994 GitHub stars~2.7k tokensUpdated 10 mo ago
    Auto-check passed

  • Barba.js Page Transitions

    freshtechbro/claudedesignskills

    Adds animated page transitions to multi-page sites with Barba.js, covering the wrapper and container markup, lifecycle hooks, views and GSAP integration.

    994 GitHub stars~4.9k tokensUpdated 10 mo ago
    Auto-check passed

  • Blender Web Export Pipeline

    freshtechbro/claudedesignskills

    Exports and optimizes Blender 3D models and animations for the web as glTF, covering batch Python scripting, texture baking, decimation and LOD generation for Three.js and Babylon.js.

    994 GitHub stars~4.2k tokensUpdated 10 mo ago
    Auto-check passed

  • GSAP and ScrollTrigger

    freshtechbro/claudedesignskills

    Covers GSAP tweens and timelines and the ScrollTrigger plugin for scroll-driven animation, including pinning, scrubbing, parallax and horizontal scroll sections.

    994 GitHub stars~4.3k tokensUpdated 10 mo ago
    Auto-check passed

  • Locomotive Scroll

    freshtechbro/claudedesignskills

    A guide to the Locomotive Scroll library for smooth scrolling, parallax, viewport detection, sticky elements and GSAP ScrollTrigger integration.

    994 GitHub stars~3.1k tokensUpdated 10 mo ago
    Auto-check passed

  • Lottie Animation Integration

    freshtechbro/claudedesignskills

    Implements After Effects Lottie animations in web and React apps: picking JSON or dotLottie format, a rendering library, and a data source, with an optimizer script.

    994 GitHub stars~4.5k tokensUpdated 10 mo ago
    Auto-check passed

Works with

Categories

Questions about Scroll Reveal Libraries

What does Scroll Reveal Libraries do?

Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Scroll Reveal Libraries is an agent skill from freshtechbro/claudedesignskills. Simple scroll-triggered reveal animations using AOS (Animate On Scroll).

When should I use Scroll Reveal Libraries?

Scroll Reveal Libraries fits situations like: building marketing pages; content-heavy sites requiring basic fade/slide effects without complex animation orchestration; tasks involving scroll animations; scroll-triggered reveals.

How do I install Scroll Reveal Libraries in Claude Code?

Run `npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a claude-code`. Or copy the skill folder (.claude/skills/scroll-reveal-libraries in freshtechbro/claudedesignskills) into .claude/skills/scroll-reveal-libraries in your project. Claude Code loads it when a task matches its description.

How do I install Scroll Reveal Libraries in Codex?

Run `npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a codex`. Or copy the skill folder (.claude/skills/scroll-reveal-libraries in freshtechbro/claudedesignskills) into .agents/skills/scroll-reveal-libraries in your project. Codex loads it when a task matches its description.

Can I use Scroll Reveal Libraries in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add freshtechbro/claudedesignskills --skill scroll-reveal-libraries -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/scroll-reveal-libraries, .gemini/skills/scroll-reveal-libraries, .github/skills/scroll-reveal-libraries and .opencode/skills/scroll-reveal-libraries in your project.

What does Scroll Reveal Libraries need to run?

Going by SKILL.md and its folder, Scroll Reveal Libraries needs Python for the scripts in its folder and the command-line tools its instructions call (npm and yarn). Our summary lists: Python 3; Node.js.

Does Scroll Reveal Libraries access the network?

SKILL.md names 3 domains. In commands or code: unpkg.com; the agent is likely to contact it when it follows the instructions. As links in the text: michalsnik.github.io and github.com. This is read from the text; nothing was executed.

Is Scroll Reveal Libraries safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.

What licence does Scroll Reveal Libraries use?

Scroll Reveal Libraries is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Scroll Reveal Libraries use?

About 4.3k tokens (SKILL.md is roughly 17k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 6.8k tokens, read only when the agent opens those files.

What are the alternatives to Scroll Reveal Libraries?

Skills that share tags, products or a category with Scroll Reveal Libraries: Animated React Component Libraries (Hainrixz/editor-pro-max, 261 stars), Silk Design (bendrape1-byte/silk-design, 138 stars), Awwwards-Level React Animations (Hainrixz/editor-pro-max, 261 stars) and Motiscope Recreate (KumarSashank/motiscope, 122 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Scroll Reveal Libraries?

freshtechbro (a GitHub user) maintains it in freshtechbro/claudedesignskills, which has 994 GitHub stars. The repository holds 19 skills in this directory. The repository was last updated on November 20, 2025.

Source: freshtechbro/claudedesignskills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.