An easy way to add scrolling animations to a project using the sal.js library.
Open main.js and import the Sal.js library:
import sal from 'sal.js';
sal();
The Sal.js library is already installed as a package in our boilerplate. No need to run npm install --save sal.js again.
Enqueue the styles:
wp_register_style('sal', get_template_directory_uri() . '/node_modules/sal.js/dist/sal.css', [], 1, 'all');
wp_enqueue_style('sal');
You can place this in the scripts() function at the top of the functions.php file
Start adding animations to your elements. See their documentation to learn how to do so. I found that the easiest way was to create an animation.php file (in the /inc folder) with the desired animation stored in a variable, for example:
<?php $animation = 'data-sal="slide-up" style="--sal-duration: 0.9s;"'; ?>
Include the file where needed at the top of the file, under get_header():
include get_template_directory() . '/inc/animation.php';
Echo it out on the element, for example:
<div class="home-hero" <?= $animation; ?>>