Run any Skill in Manus with one click

Get Started

animation-on-scroll

Stars0

Forks0

UpdatedJuly 9, 2026 at 05:04

用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

shushuitie2017

shushuitie2017/design-agent-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

name	animation-on-scroll
description	用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

Animation On Scroll 技能

工作流程

确认动画风格、时机，以及动画应运行一次还是重复。
提供 keyframes + JS observer 片段，以及要应用的确切 Tailwind 类。
只提供聚焦的微调（threshold、rootMargin、duration、delay、transform/blur 值）。

使用检查清单

把 JS 片段插入 <head>，放在 keyframes 之后。
给元素添加动画类与 animate-on-scroll。
确保你的 keyframes 名称与 Tailwind 动画引用匹配。

IntersectionObserver 触发器

<script>
  /*
    Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:

    1) Insert this code in the <head> along with the Animation Keyframe code.

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
  */
  (function () {
    // Inject CSS for paused/running states
    const style = document.createElement("style");
    style.textContent = `
      /* Default: paused */
      .animate-on-scroll { animation-play-state: paused !important; }
      /* Activated by JS */
      .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); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

<style>
  /*
    Sequence animation intro. Usage:

    1) Insert this code in the <head>

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
  */
  @keyframes animationIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
    }
  }
</style>

Tailwind 示例

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

定制旋钮

触发：调整 threshold 与 rootMargin 以更早/更晚显现。
重复：设 once = false 以允许重新进入时重播。
动效：微调 keyframes 里的 translateY 与 blur。
时机：改 Tailwind 动画值里的 duration 与 delay。

常见坑

忘记在 JS 片段之前放入 keyframes。
用了与 Tailwind 动画不同的 keyframe 名称。
因元素在 observer 初始化前已在视口内，导致动画不运行。

规格缺失时该问的问题

动画应运行一次，还是元素每次重新进入都运行？
应在进入视口前多远开始？
你想要什么动效风格（淡入、滑动、模糊、缩放）？

More from this repository

same repository

audit-verify-explain-grade-5

shushuitie2017/design-agent-skills

审计工作、用具体证据核验声明，并用五年级生也能懂的简单语言解释结果。当用户要求 review、审计、检查、核验、解释一处改动、解释一处修复、总结测试结果、验证某个东西是否有效，或把技术性发现翻译成给非技术读者看的大白话时使用。

2026-07-090

copywriting

shushuitie2017/design-agent-skills

当用户想为任何页面撰写、重写或改进营销文案时使用——包括首页、落地页、定价页、功能页、关于页或产品页。也在用户说"write copy for""improve this copy""rewrite this page""marketing copy""headline help""CTA copy""value proposition""tagline""subheadline""hero section copy""above the fold""this copy is weak""make this more compelling"或"help me describe my product"时使用。只要有人在处理需要说服或转化的网站文本，就用它。邮件文案见 email-sequence；弹窗文案见 popup-cro；编辑已有文案见 copy-editing。

2026-07-090

customer-email-draft-threads

shushuitie2017/design-agent-skills

仅起草的 Gmail 客户支持分诊，并为每封草稿创建对应的 Codex 项目线程。当用户要求运行客户邮件自动化、检查未读/最近的支持邮件、准备 Gmail 草稿回复、对客户/个人邮件分诊同时跳过自动化邮件，或为已起草邮件的跟进创建 agent/项目线程时使用。

2026-07-090

customer-support-verification

shushuitie2017/design-agent-skills

对照适用的操作手册、草稿安全、证据、改动（mutation）和提交范围要求，核验客户支持工作。在每次 Gmail/客户支持分诊、账单/取消/退款/账户/访问权限调查、支持交接或草稿复核任务之后、给出最终回复之前使用；也在用户要求对照操作手册、清单、skill 或要求来核验支持工作时使用。

2026-07-090

daily-ui-inspiration-capture

shushuitie2017/design-agent-skills

创建一份周期性的每日 UI 灵感采集。当用户要求运行、刷新、打包或校验带日期的 UI 灵感集时使用，尤其针对 `articles/YYYY-MM-DD-ui-inspiration-capture/` 产物、Framer/Dribbble 落地页灵感、动效研究截图/视频、AI-builder 提示词、重复检查，或把项目操作手册转成可重复的工作流程。

2026-07-090

elevenlabs-tts

shushuitie2017/design-agent-skills

使用本地语音配置，从脚本或内联文本生成 ElevenLabs 文本转语音音频。当用户要 ElevenLabs、text-to-speech、TTS、旁白、配音、语音音频或语音生成时使用；语音名称、voice id、邮箱、所有者和账户特定默认值只从 skill 之外的本地配置载入。

2026-07-090

name	animation-on-scroll
description	用 IntersectionObserver 创建滚动触发动画，配 Tailwind 友好的动画类与 keyframes。当被要求做滚动显现、animate-on-scroll，或在元素进入视口时对其动画进行排序时使用。

Animation On Scroll 技能

工作流程

确认动画风格、时机，以及动画应运行一次还是重复。
提供 keyframes + JS observer 片段，以及要应用的确切 Tailwind 类。
只提供聚焦的微调（threshold、rootMargin、duration、delay、transform/blur 值）。

使用检查清单

把 JS 片段插入 <head>，放在 keyframes 之后。
给元素添加动画类与 animate-on-scroll。
确保你的 keyframes 名称与 Tailwind 动画引用匹配。

IntersectionObserver 触发器

<script>
  /*
    Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:

    1) Insert this code in the <head> along with the Animation Keyframe code.

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both] animate-on-scroll
  */
  (function () {
    // Inject CSS for paused/running states
    const style = document.createElement("style");
    style.textContent = `
      /* Default: paused */
      .animate-on-scroll { animation-play-state: paused !important; }
      /* Activated by JS */
      .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); // observing twice is a no-op
      });
    };

    document.addEventListener("DOMContentLoaded", () => initInViewAnimations());
  })();
</script>

Keyframes

<style>
  /*
    Sequence animation intro. Usage:

    1) Insert this code in the <head>

    2) Add to Tailwind Classes: [animation:animationIn_0.8s_ease-out_0.1s_both]
  */
  @keyframes animationIn {
    0% {
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0px);
    }
  }
</style>

Tailwind 示例

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

定制旋钮

触发：调整 threshold 与 rootMargin 以更早/更晚显现。
重复：设 once = false 以允许重新进入时重播。
动效：微调 keyframes 里的 translateY 与 blur。
时机：改 Tailwind 动画值里的 duration 与 delay。

常见坑

忘记在 JS 片段之前放入 keyframes。
用了与 Tailwind 动画不同的 keyframe 名称。
因元素在 observer 初始化前已在视口内，导致动画不运行。

规格缺失时该问的问题

动画应运行一次，还是元素每次重新进入都运行？
应在进入视口前多远开始？
你想要什么动效风格（淡入、滑动、模糊、缩放）？