Lightweight and easy to use vanilla js library to add css animations to elements on scroll.

Overview

Scrollrisen

Trigger css animations on scroll as elements enter the viewport. Zero dependencies, lightweight and easy to use and customize

Installation

Basic

Add link in document head

    <link rel="stylesheet" href="./dist/css/scrollrisen.css">

Add script in document body and init scrollrisen:

    <script src="./dist/js/scrollrisen.js"></script>
    <script>
        //read more about the options below
        scrollrisen.init({});
    </script>

Using package managers

npm

    npm install scroll-risen

yarn

    yarn add scroll-risen

Import script and style and initialize

    import scrollrisen from 'scroll-risen/dist/scrollrisen.js'
    
    import 'scroll-risen/dist/scrollrisen.css'
    
    //init library(read more about the options below)
    scrollrisen.init({});

Usage

1.Initialize

scrollrisen.init({
    //below is a list of default options
    easing: 'ease', //easing function
    duration: 2000, //animation duration in miliseconds
    trigger: 0.2, //determines the point when animation should kick in relative to viewport. 0 means as soon as element becomes visible, 1 means when top of the element reaches the top of the screen
    reverse: true, //should  reverse the animation if element is below the viewport
    debounce: 16, //how often should scroll handler be called
});

2.Set animations with data-sr attribute

data-sr attribute is used to determine which elements you want to animate and what type of animations you want to apply

    <div data-sr = "fade-l"></div> <!-- applies data-sr attribute to fade from left to right -->

List of possible animations

Fade

data-sr description
fade simple fade animation
fade-l fade from left
fade-r fade from right
fade-t fade from top
fade-b fade from bottom
fade-t-l fade from top left
fade-t-r fade from top right
fade-b-l fade from bottom left
fade-b-l fade from bottom left
fade-b-r fade from bottom right

Flip

data-sr description
flip-l flip from left
flip-r flip from right
flip-t flip from top
flip-b flip from bottom

Zoom

data-sr description
zoom center zoom
zoom-l zoom from left
zoom-r zoom from right
zoom-t zoom from top
zoom-b zoom from bottom

NOTE You can extend or create custom list of animations if this isn't enough for your use case by either modifying scrollrisen.css or adding styles to your custom css file.

You might also like...

Smooth scroll animation - vanilla JavaScript

Smooth Scroll Animation Using Vanilla JavaScript Provides smooth scroll functionality on clicking buttons with different eeasing properties. The "smoo

Aug 14, 2022

a Vanilla JS Smooth Scroll to ⚓ script

Smooth Scroll Library ScrollToSmooth Support for older versions: If you need documentation for versions prior 3.0.0 visit this page Lightweight Vanill

Aug 14, 2022

A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses

MeiMei - Multiple Email Input MeiMei: A simple easy to use vanilla JavaScript library for creating input fields that accept multiple email addresses.

Apr 13, 2022

jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested on Firefox/Chrome/Maxthon/iPhone/Android. Very light 7ko min.js and 1Ko min.css.

Nice-Scrollbar Responsive jQuery based scrolling Bar, for PC and Smartphones (touch events). It is modern slim, easy to integrate, easy to use. Tested

Jan 18, 2022

In this project, I built a to-do list app, which is inspired by the minimalist website. Build withHTML/CSS & JavaScript best practices: Correct use of tags, elements, properties and syntax.

Webpack Exercise In this project, I built a to-do list app, which is inspired by the minimalist website. Built With HTML/CSS & JavaScript best practic

Oct 11, 2022

This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different currencies and formattings.

intl-currency-input This is a dependency-free easy-to-use vanilla JavaScript addon allowing you to create HTML currency inputs with various different

Jan 4, 2023

A tiny JavaScript library to enable CSS animations when user scrolls.

A tiny JavaScript library to enable CSS animations when user scrolls.

A tiny JavaScript library to enable CSS animations when user scrolls. This library allows you to toggle one or more classes on an element when it appe

Nov 24, 2022

A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements.

svg-pan-zoom-container A vanilla-js module for adding zoom-on-wheel and pan-on-drag behavior to inline SVG elements. No need to write scripts. Just ma

Dec 10, 2022

An open-source Typing-effect Library, That enables potential users to add a typing effect to mere DOM Elements.

Typing Effect Library An open-source Typing-effect Library I created. That enables potential users to add a typing effect to mere DOM Elements. Tool P

Oct 3, 2022
Owner
null
Lightweight JavaScript library that allows you add motion blur to your CSS animations

MotionBlurJS For more information and examples please visit: https://www.motionblurjs.com What is MotionBlurJS MotionBlurJS is a lightweight JavaScrip

Adir 52 Oct 6, 2022
A lightweight JavaScript utility to fade elements in and out of view on page scroll.

ScrollFade ScrollFade is used to fade elements in and out of view while scrolling through a page. Tag any elements you want to fade with the class scr

Jordan Trbuhovic 14 Dec 15, 2022
curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.

What is it ? Shaders are the new front-end web developpment big thing, with the ability to create very powerful 3D interactions and animations. A lot

Martin Laxenaire 1.4k Jan 1, 2023
A javascript library to animate elements on scroll page events

ScrollJS by Sam Sirianni ScrollJS is a library written in Javascript. With ScrollJS you can animate elements on scroll events. Visit the ScrollJS webs

Sam Sirianni 1 Mar 21, 2021
Javascript library for switching fixed elements on scroll through sections. Like Midnight.js, but without jQuery

Library for Switching Fixed Elements on Scroll Sometimes designers create complex logic and fix parts of the interface. Also they colour page sections

Vladimir Lysov 38 Sep 19, 2022
A small jQuery plugin for rendering scroll-based HTML animations

Storyline Build beautiful landing pages that change as the user scrolls up or down. Project created in 2013 and ported to GitHub in 2021. Demo Just vi

Mark Jivko 3 May 30, 2022
Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components.

Chakra UI Animations Chakra UI Animations is a dependancy which offers you pre-built animations for your Chakra UI components. Installation yarn add @

Code Chemistry Inc. 9 Nov 19, 2022
A timed continuous carousel that uses vanilla JavaScript & CSS animations.

Continuous Carousel ∞ Timed continuous carousel that uses vanilla JavaScript & CSS animations. It supports both horizontal and vertical scrolling. Mar

Jon C. 16 Jan 3, 2023
Animate elements as they scroll into view.

Animate elements as they scroll into view. Introduction ScrollReveal is a JavaScript library for easily animating elements as they enter/leave the vie

null 21.2k Jan 4, 2023
An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements.

svg-pen-sketch An easy-to-use JavaScript library aimed at making it easier to draw on SVG elements when using a digital pen (such as the Surface Pen).

Kevin Desousa 8 Jul 27, 2022