Scroll Effects
These effects are tied directly to the scroll position. Scroll slowly to feel the motion.
Progress & indicators
Reading progress and scroll indicators.
Image & card
Cards, images and galleries with scroll motion.
Layout scroll
Snap, pinning and section-by-section motion.
Accents & lines
Lines, marquees, quotes and background changes.
Text masks
Large typography revealed on scroll via a mask gradient.
How much scroll animation can a page take?
Scroll effects tie movement to the path through the page instead of to time. A bar shows how much is still to come, an image opens as it moves into view, cards stack on top of each other as you keep scrolling. The 31 effects here are sorted into four groups: progress and indicators, image and card, layout scroll, accents and lines.
A page can take one or two big scroll moments with calm sections in between. If every section moves, none of them stands out, and scrolling starts to feel heavy. The effects run on framer-motion and need no other library. They are tuned for touch and small screens, and with reduced motion they hold back.
Related guides
Frequently asked questions
They use Framer Motion's scroll utilities and tie animations to the scroll position without hurting performance.
Yes. The effects are tuned for touch and small screens and stay calm and smooth there.
Yes. When the reduced motion setting is active, the effects are eased back.
Didn't find your question? We're happy to help.
Get in touch