ScrollEase

A lightweight, CSS-powered animation library for smooth scroll effects

Scroll down to see it in action

ScrollEase Features

Lightweight & Fast

ScrollEase runs on pure CSS, ensuring fast performance with no JavaScript bloat.

Pure CSS Animations

Uses modern CSS features like animation-timeline for smooth, scroll-based effects.

Fully Customizable

Easily adjust speed, easing, and viewport triggers with simple data attributes.

Fallback Support

Includes a JavaScript fallback for older browsers that lack CSS support.

Animation Examples

FADE

<div data-scrollease="fade"></div>
<div data-scrollease="fade-up"></div>
<div data-scrollease="fade-down"></div>
<div data-scrollease="fade-left"></div>
<div data-scrollease="fade-right"></div>
<div data-scrollease="fade-up-right"></div>
<div data-scrollease="fade-up-left"></div>
<div data-scrollease="fade-down-right"></div>
<div data-scrollease="fade-down-left"></div>

FLIP

<div data-scrollease="flip-up"></div>
<div data-scrollease="flip-down"></div>
<div data-scrollease="flip-left"></div>
<div data-scrollease="flip-right"></div>

SLIDE

<div data-scrollease="slide-up"></div>
<div data-scrollease="slide-down"></div>
<div data-scrollease="slide-left"></div>
<div data-scrollease="slide-right"></div>

ZOOM

<div data-scrollease="zoom-in"></div>
<div data-scrollease="zoom-in-up"></div>
<div data-scrollease="zoom-in-down"></div>
<div data-scrollease="zoom-in-left"></div>
<div data-scrollease="zoom-in-right"></div>
<div data-scrollease="zoom-out"></div>
<div data-scrollease="zoom-out-up"></div>
<div data-scrollease="zoom-out-down"></div>
<div data-scrollease="zoom-out-left"></div>
<div data-scrollease="zoom-out-right"></div>

ANIMATIONS WITH DIFFERENT SETTINGS

<div data-scrollease="slide-left" data-scrollease-duration="2s" ></div>
<div data-scrollease="flip-left" data-scrollease-duration="3s" data-scrollease-easing="linear"></div>
<div data-scrollease="zoom-in-left" data-scrollease-easing="ease-out" data-scrollease-delay="1.5s" ></div>
<div data-scrollease="fade-up-right" data-scrollease-easing="ease-out" data-scrollease-range="entry 0% cover 50%"></div>
<div data-scrollease="zoom-in" data-scrollease-easing="ease-in-out" data-scrollease-delay="2s" data-scrollease-duation="3s" data-scrollease-range="entry 20% cover 90%"></div>

GET IT

Download View on Github

CDN SOURCES

CSS
<link href="https://raw.githubusercontent.com/AmitDeka/ScrollEase/refs/heads/main/lib/style/scrollease.css" rel="stylesheet">
JS
<script src="https://raw.githubusercontent.com/AmitDeka/ScrollEase/refs/heads/main/lib/js/scrollease.js"></script>

INITIALIZE ScrollEase

<script>
   ScrollEase.init();
</script>