원클릭으로 Manus에서 모든 스킬 실행

animation-on-scroll

스타56

포크8

업데이트2026년 2월 23일 05:01

Create on-scroll animation triggers using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use for scroll-reveal, animate-on-scroll, or sequencing element animations when entering the viewport.

설치

Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.

Manus에서 실행

출처

bidewio

bidewio/better-openclaw

GitHub 저장소 열기 Creator 저장소 보기

다운로드

Manus에서 실행

Animation On Scroll Skill

Usage checklist

Insert the JS snippet in the <head> after the keyframes
Add animation class and animate-on-scroll to elements
Ensure keyframe name matches the Tailwind animation reference

IntersectionObserver trigger

<script>
  (function () {
    const style = document.createElement("style");
    style.textContent = `
      .animate-on-scroll { animation-play-state: paused !important; }
      .animate-on-scroll.animate { animation-play-state: running !important; }
    `;
    document.head.appendChild(style);
    const once = true;
    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }
    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => window.__inViewIO.observe(el));
    };
    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

@keyframes animationIn {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

Tailwind example

<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">...</div>

Customization knobs

Trigger: Adjust threshold and rootMargin for earlier/later reveals
Repeat: Set once = false for replay on re-entry
Motion: Tweak translateY and blur in keyframes
Timing: Change duration/delay in the animation value

Tips for AI Agents

Ask whether animations should run once or repeat.
Confirm motion style (fade, slide, blur, scale).

이 저장소의 다른 Skills

같은 저장소

hermes-agent

bidewio/better-openclaw

Interact with Hermes Agent's OpenAI-compatible API for multi-model conversations, skill management, and scheduled tasks

2026-03-2256

better-openclaw

bidewio/better-openclaw

Generate and manage Docker Compose stacks via the better-openclaw API

2026-03-0456

headscale-network

bidewio/better-openclaw

Deploy and manage a self-hosted Tailscale control server (Headscale) for zero-trust private networking and secure access to your stack.

2026-02-2556

browser-learn

bidewio/better-openclaw

A specialized skill workflow instructing you to use Serper (for discovery) and any configured Browser Automation provider (Hyperbrowser, Browseruse, Lightpanda, or Browserless) to scrape official documentation and teach yourself new technical skills.

2026-02-2456

hexstrike-ai-mcp-integration

bidewio/better-openclaw

Instructions for utilizing the HexStrike AI MCP Server for automated pentesting and security research.

2026-02-2456

pentagi-orchestrator-interface

bidewio/better-openclaw

Instructions for managing the PentAGI autonomous AI agent system for complex penetration testing tasks.

2026-02-2456

name	animation-on-scroll
description	Create on-scroll animation triggers using IntersectionObserver with Tailwind-friendly animation classes and keyframes. Use for scroll-reveal, animate-on-scroll, or sequencing element animations when entering the viewport.
metadata	{"openclaw":{"emoji":"📜","source":"https://github.com/MengTo/Skills"}}

Animation On Scroll Skill

Usage checklist

Insert the JS snippet in the <head> after the keyframes
Add animation class and animate-on-scroll to elements
Ensure keyframe name matches the Tailwind animation reference

IntersectionObserver trigger

<script>
  (function () {
    const style = document.createElement("style");
    style.textContent = `
      .animate-on-scroll { animation-play-state: paused !important; }
      .animate-on-scroll.animate { animation-play-state: running !important; }
    `;
    document.head.appendChild(style);
    const once = true;
    if (!window.__inViewIO) {
      window.__inViewIO = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate");
            if (once) window.__inViewIO.unobserve(entry.target);
          }
        });
      }, { threshold: 0.2, rootMargin: "0px 0px -10% 0px" });
    }
    window.initInViewAnimations = function (selector = ".animate-on-scroll") {
      document.querySelectorAll(selector).forEach((el) => window.__inViewIO.observe(el));
    };
    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

@keyframes animationIn {
  0% { opacity: 0; transform: translateY(30px); filter: blur(8px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0px); }
}

Tailwind example

<div class="animate-on-scroll [animation:animationIn_0.8s_ease-out_0.1s_both]">...</div>

Customization knobs

Trigger: Adjust threshold and rootMargin for earlier/later reveals
Repeat: Set once = false for replay on re-entry
Motion: Tweak translateY and blur in keyframes
Timing: Change duration/delay in the animation value

Tips for AI Agents

Ask whether animations should run once or repeat.
Confirm motion style (fade, slide, blur, scale).