Watch 16 effects, learn their names, and copy a clear request for your AI coding tool.
Scroll-triggered When the element enters the viewport, play a one-off entrance animation. The animation is not tied to scroll position.
Use it for：Card and image entrances
Add a Scroll-triggered entrance to content cards: fade in and move slightly upward when each enters the viewport, once per card. Use a fixed-duration animation independent of scroll distance. Show content immediately with reduced motion.
Scroll-linked Bind animation progress directly to scroll progress: scroll 50% and the animation is 50% done.
Use it for：Animations controlled by scrolling
Create a Scroll-linked animation: move an element from left to right as its section passes through the viewport. Bind progress to that section’s scroll position: stop when scrolling stops and reverse when scrolling back. Use a static reduced-motion state.
Parallax Move layers at different speeds while scrolling to create depth.
Use it for：Layered hero backgrounds
Add subtle Parallax to the hero: the background moves more slowly than foreground text to create depth. Limit it to the hero and keep text readable. Reduce displacement on mobile and disable parallax with reduced motion.
Sticky Pin an element to the viewport once it reaches a threshold, and release it when the container ends.
Use it for：Contents, navigation or fixed explanations
Make this section’s table of contents Sticky: pin it below the fixed header when it reaches the top, only within its parent section, then release it at the section’s end. Keep text unobstructed and use compact navigation on mobile.
Scroll Snap When scrolling stops, snap the viewport to the nearest card.
Use it for：Swipeable cards or project lists
Add Scroll Snap to the horizontal card list: after a swipe ends, align a card to the container’s left edge while showing a hint of the next card. Support touch and keyboard navigation; do not auto-advance.
Horizontal Scroll Vertical scroll drives horizontal movement: the content moves sideways while you scroll down.
Use it for：Project showcases and horizontal narratives
Create a Horizontal Scroll showcase driven by vertical scrolling: pin the section’s viewport, move cards left as the page scrolls down, then resume normal vertical flow after the last card. On mobile use a swipeable list; with reduced motion show a normal list.
Scroll Progress A thin bar fills as you scroll — the reading-progress indicator used by most articles and docs.
Use it for：Article reading position
Add a Scroll Progress bar above the article: fill from 0% to 100% based on progress through the article body, reversing when scrolling back. Exclude the footer and keep the thin bar clear of navigation and text.
SVG Line Draw Scroll draws an SVG path stroke by stroke; great for timelines, flow charts and signatures.
Use it for：Process paths and connecting lines
Use SVG Line Draw for the process diagram: progressively draw its connecting path from start to finish as the section scrolls, and retract it when scrolling back. Keep node text readable throughout and show the complete path with reduced motion.
Count-up A number ticks from zero to a target value as the element scrolls into view.
Use it for：Metrics and statistics
Add a scroll-linked Count-up to statistics: increase from zero to the target as the statistics section scrolls, reaching the exact value at its end and reversing when scrolling back. Preserve units and decimal precision; show final values with reduced motion.
Scrollytelling A sticky visual stays pinned while text steps scroll past — the format behind most data stories.
Use it for：Product explanations and step-by-step stories
Create Scrollytelling: on desktop pin a visual on the left while steps scroll on the right, updating the visual as each step enters view. Release it at the section’s end. On mobile place each corresponding image with its step in normal document flow.
Zoom on Scroll An element scales up or down with scroll progress, like a product hero zooming in.
Use it for：A slow push into a product image
Add Zoom on Scroll to the product image: scale smoothly from 0.9 to 1.1 as it passes through view, stopping with the scroll and shrinking when scrolling back. Do not shift surrounding layout or crop essential content. Keep original size with reduced motion.
Skew on Scroll Skew elements with scroll progress (or velocity) for a dynamic, editorial feel.
Use it for：Subtly tilting showcase cards
Add Skew on Scroll to showcase cards: interpolate from a small negative skew to a small positive skew with section scroll progress, reversing when scrolling back. Keep angles subtle and text readable. Disable skew on mobile and with reduced motion.
Text Reveal Highlight text left to right as you scroll, revealing a sentence progressively.
Scroll to reveal this sentence, word by word.
Use it for：Gradually highlighting a key sentence
Add Text Reveal to a key sentence: keep the full sentence visible in a muted but readable color, then progressively highlight it left to right with scroll progress, reversing on upward scroll. Preserve text for reading and search. Highlight everything with reduced motion.
Sticky Header Shrink A sticky header shrinks once you scroll past a threshold to save vertical space.
Use it for：A space-saving fixed header
Create Sticky Header Shrink: show the full header at the top, smoothly reduce its height and logo size as the page scrolls down, and restore it at the top. Keep navigation usable and content stable. Retain mobile tap targets; change states without animation with reduced motion.
Marquee An endless ticker whose offset moves with scroll — for logos, tags or news strips.
Use it for：Taglines or brand lists
Create a Marquee: loop the brand names horizontally at a constant time-based speed with a seamless join, independent of page scrolling. Provide a pause button and keep content readable. Use a static list with reduced motion; this is not a scroll-progress animation.
Full-page Snap Scroll snaps one full screen at a time, like flipping slides.
Use it for：Full-screen projects or chapters
Add Full-page Snap: give each showcase chapter one viewport and snap to the nearest chapter when scrolling settles. Support keyboard navigation. Use normal scrolling on mobile or when content exceeds one screen; do not trap page scrolling.