80+ scroll effects you can preview live. CSS transform scroll animations, cinematic scroll transitions, click any effect and scroll to see exactly how it looks on a fullscreen website.
Scroll or click the navigation to see the selected scroll effect in the preview
Current effect: stack
A scroll effect is a visual transition that plays as the user scrolls from one section of a page to the next. Rather than a hard cut between sections, the content on screen transforms, rotates, fades, warps, or ripples, giving websites a polished, app-like feel.
Website scroll effects generally fall into two categories. CSS-based scroll effects use transform properties like scale, rotate3d, translate, and skew to animate sections during the transition. They're lightweight, GPU-accelerated, and work in every browser. More advanced scroll effects use WebGL to blend sections pixel by pixel, enabling distortion, chromatic aberration, page curls, ripples, and other visual transitions that CSS can't achieve on its own.
This gallery includes 80+ scroll animation examples covering both approaches, so you can preview each one live before deciding which scroll effect fits your project.
Every scroll effect in this gallery works the same way at a high level: when the user scrolls from one fullscreen section to the next, a visual transition plays between the outgoing and incoming content. The difference is how that transition is rendered.
CSS scroll effects use GPU-accelerated transform properties (scale, rotate3d, translate, skew) combined with opacity and perspective changes. The browser's compositor handles the animation natively, so these scroll effects work in every browser and require zero JavaScript beyond a one-line config.
Cinematic scroll effects go further. They capture both sections as textures and blend them pixel by pixel using GPU shaders, producing distortion, chromatic aberration, page curls, ripples, and other effects that aren't possible with CSS alone. fullPage.js ships 60+ of these cinematic scroll animations ready to use.
In both cases, fullPage.js handles the scroll detection, touch support, timing, and cross-browser edge cases. You just pick which scroll effect you want.
Not all website scroll effects are created equal. Depending on the look you're after, you can choose from three different approaches, each with a different level of visual complexity.
The simplest and most widely supported. These scroll effects use CSS transform properties like scale, rotate3d, translate, and skew to animate sections as the user scrolls. Effects like stack, cube, carousel3d, and vortex all fall into this category. They run on the browser's GPU compositor, work everywhere, and require just one config option.
For more advanced scroll effects (ripples, page curls, chromatic aberration, glitch distortion), fullPage.js includes 60+ WebGL-powered effects. These use GPU shaders to blend sections pixel by pixel, producing transitions that aren't possible with CSS alone. You don't need to write any shader code; just pick an effect name.
If you need a completely unique scroll effect, fullPage.js provides callbacks like afterLoad and onLeave that fire at exactly the right moment during each section transition. Combine these with CSS animations, JavaScript libraries like GSAP, or your own code to create any scroll animation you want.
Building a single scroll effect is straightforward. Making it work reliably across every device, browser, and screen size is where most of the effort goes.
requestAnimationFrame with precise easing. Any stutter in the animation shows as a visible hitch. Assets must be preloaded before the scroll transition starts.
The 80+ scroll effects above have been tested against all of these scenarios over several years of production use on thousands of real websites.
There are several tools and techniques for adding scroll effects to a website. The right choice depends on what kind of scroll animation you need.
CSS scroll-snap is built into every modern browser. It gives you snap-to-section scrolling with zero JavaScript, great for simple layouts. The limitation is that there are no visual transitions between sections: it snaps, but there's no animation during the scroll.
GSAP ScrollTrigger is excellent for animating individual elements on scroll, such as text, images, counters, and SVGs. If you need fine-grained control over when and how each element animates as the user scrolls, it's one of the best tools available. It's not designed for full-screen section-to-section transitions though.
curtains.js and three.js give you full WebGL access and you can build custom scroll effects with them. You'll write the shaders yourself, build the scroll-to-transition timing, and handle cross-browser edge cases for each effect. Good choice if you want total creative control.
The 80+ scroll effects in this gallery are built with fullPage.js, which handles CSS transform and WebGL scroll effects out of the box.
The Effects extension for fullPage.js includes 20+ CSS transform scroll effects. Each one changes how sections transition on scroll using pure CSS transform on the GPU. Here's every available preset:
| Effect name | Description |
|---|---|
| stack | Stacks sections on top of each other |
| stackCover | Sections cover the previous ones while stacking |
| scale | Scales sections while moving |
| scaleFade | Combines scaling with fade effect |
| cover | Sections slide over previous ones |
| coverZoom | Cover effect with zoom animation |
| door | 3D door opening effect |
| carousel3d | 3D carousel rotation |
| cube | 3D cube rotation |
| vortex | Rotating vortex effect |
| focus | Focus/unfocus effect while scrolling |
| inertia | Smooth inertia-based sliding effect |
| coverInverted | Cover effect with inverted direction |
| coverZoomInverted | Cover zoom effect with inverted direction |
| zoomStack | Stack effect with zoom animation |
| zoom | Simple zoom effect |
| stackFade | Stack effect with fade animation |
| elastic | Elastic stretching effect |
| innerCube | Inner cube rotation effect |
| push | Push effect with 3D rotation |
| zoomOut | Zoom out effect |
| fadeStack | Fade effect with stacking |
To use any of these, set the effects option to the preset name, for example effects: 'cube'. All presets work with React, Vue, Angular, plain HTML, and the WordPress plugins.
Add scroll transitions, parallax and animations to your site with fullPage.js. One component, 80+ effects.
Powering fullscreen design for Google, Sony, BBC, eBay & more