How to use Scroll Animation Library (SAL) with React

Animation one of the coolest thing but at the same time most complex thing for a frontend developer. Animations is always the most important thing for a better UX. In this article we will gonna learn how to use Scroll Animation Library (SAL) with React.

What is Sal ?

SAL stands for Scroll Animation Library. SAL is one of the library which focuses on the performance and the size. It’s written in Vanilla JS without any dependency.

Sal (Scroll Animation Library) was created to provide a performant and lightweight solution for animating elements on scroll. It’s based on the Intersection Observer, which gives amazing performance in terms of checking the element’s presence in the viewport.

Installation & Usage

Like other packages you can easily install it using npm or yarn.

# Usage with NPM
$ npm install --save sal.js

# and with Yarn
$ yarn add sal.js

Once the package is installed you need to import the package and its styling.

import sal from "sal.js";
import "sal.js/dist/sal.css";

After that add your content.

  <div className="App">
      {Array.from({ length: 80 }).map((a, index) => (
        <div data-sal="fade" key={index}>
          Blogreact
        </div>
      ))}
    </div>

We are using data-sal attribute for animation.

At last we just need to initialise the sal.

useEffect(sal, []);

Our component will gonna look like this.

import React, { useEffect } from "react";
import sal from "sal.js";
import "./styles.css";
import "sal.js/dist/sal.css";
export default function App() {
  useEffect(sal, []);
  return (
    <div className="App">
      {Array.from({ length: 80 }).map((a, index) => (
        <div data-sal="fade" key={index}>
          Blogreact
        </div>
      ))}
    </div>
  );
}

That’s it now check your app in browser. Whenever the elements gonna come in the viewport the animation will be gonna apply.

The library supports several animations:

  • fade
  • slide-up
  • slide-down
  • slide-left
  • slide-right
  • zoom-in
  • zoom-out
  • flip-up
  • flip-down
  • flip-left
  • flip-right

You can check demo here

Edit yumsb

Check whole docs here.

Jump.js a modern smooth scrolling library

Categories: Reactjs