animation-on-scroll
Animation On Scroll Skill
Workflow
- Confirm animation style, timing, and whether animations should run once or repeat.
- Provide the keyframes + JS observer snippet and the exact Tailwind class to apply.
- Offer focused tweaks only (threshold, rootMargin, duration, delay, transform/blur values).
Usage checklist
- Insert the JS snippet in the
<head>after the keyframes. - Add the animation class and
animate-on-scrollto elements. - Ensure your keyframes name matches the Tailwind animation reference.
IntersectionObserver trigger
<script>
/*
Sequence animation on scroll when visible. Requires Animation Keyframe. Usage:
1) Insert this code in the <head> along with the Animation Keyframe code.
More from mengto/skills
unsplash-asset-images
Use when you need to pick high-quality Unsplash images for product/design assets (avatars, headshots, portraits, large website backgrounds, and abstract wallpapers) and output real Unsplash URLs plus practical instructions for producing the right resolutions and aspect ratios (1:1, 4:5, 3:4, 16:9, 9:16).
69landing-page
Use when designing or rewriting a high-converting landing page (single-offer page) for SaaS/apps/services. Covers structure, layout patterns, conversion strategies, copywriting, SEO/AEO, and common pitfalls.
32gsap
Use when you need to add or debug professional web animations with GSAP (timelines, ScrollTrigger, stagger, transforms) in HTML/CSS/JS/React. Includes patterns for smooth motion, performance, and common pitfalls.
29globe-gl
Use when implementing globe.gl (Globe.GL) for 3D globe data visualization with WebGL/ThreeJS, including setup, data layers (points, arcs, polygons, labels), and integration patterns in plain HTML or React.
28progressive-blur
Create a layered CSS progressive blur (top or bottom) using multiple backdrop-filter masks for depth and softness. Use when asked for “progressive blur”, “gradient blur overlay”, or stepped blur masks that fade from an edge of the viewport.
28pricing-page
Use when designing or rewriting a high-converting SaaS pricing page (structure, plan design, copywriting, SEO/AEO, FAQs, layout patterns, experiments). Includes checklists, templates, and common pitfalls.
26