The new GenerateBlocks Pro plugin is now available for purchase and it’s awesome! One of the new features added is the ability to add your own custom attributes to a GenerateBlocks container. Amongst other things, this gives us the ability to integrate various JavaScript libraries that make use of those custom attributes. One of those libraries is a very lightweight scrolling library called Sal.js.

Sal.js (Scroll Animation Library) is a performance-focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript with no dependencies! It was created to provide a performant and lightweight solution for animating elements on scroll. It’s based on the Intersection Observer, which gives an amazing performance in terms of checking the element’s presence in the viewport.

To download the library, head over to the GitHub repository, select the green Code button and from the dropdown that appears select Download ZIP. Once the package is downloaded, create a child theme and add an extra folder inside it called sal (or any name you want). Now, extract the zip file you downloaded into a location on your computer, copy sal.css and sal.js files located inside sal-master->dist folder and paste those files inside the sal folder you created in your child theme directory. Finally, create another js file named sal-init.js (or any name you want). We are going to use that file as our initialization script.

In my case, I am going to use the library for the Create Advanced homepage of my agency website. The following code added to functions.php will enqueue the files only for the homepage.

function gm_enqueue_sal_scripts() {
    if( is_front_page() )
    {
        wp_enqueue_style( 'sal', get_stylesheet_directory_uri() . '/sal/sal.css' );
		wp_enqueue_script( 'sal', get_stylesheet_directory_uri() . '/sal/sal.js', array(), false, true );
		wp_enqueue_script( 'sal-init', get_stylesheet_directory_uri() . '/sal/sal-init.js', null, null, true );
    }
}

add_action( 'wp_enqueue_scripts', 'gm_enqueue_sal_scripts' );

To include the scripts for the whole website just remove the is_front_page() conditional.

function gm_enqueue_sal_scripts() {

    wp_enqueue_style( 'sal', get_stylesheet_directory_uri() . '/sal/sal.css' );
    wp_enqueue_script( 'sal', get_stylesheet_directory_uri() . '/sal/sal.js', array(), false, true );
    wp_enqueue_script( 'sal-init', get_stylesheet_directory_uri() . '/sal/sal-init.js', null, null, true );

}

add_action( 'wp_enqueue_scripts', 'gm_enqueue_sal_scripts' );

Finally, I entered the following into the sal-init.js to initialize the script and also disable the scrolling animation effect for mobile devices.

const animation = sal();

const switchAnimations = () => {
  if (window.innerWidth < 768) {
    animation.reset();
    animation.disable();
  } else {
    animation.reset();
    animation.enable();
  }
};

switchAnimations();
window.addEventListener('resize', switchAnimations);

For more information on initialization options, check the Sal.js library documentation.

Now you are ready to start adding your custom attributes to the containers that you want to animate. Attributes are added by selecting a container and scrolling to the Advanced section on the right. Expand it and start adding your attribute-value pairs. For the first image and text below the fold, I added the following attributes to the containers:

Left Container

Right Container

Note the slight delay added at the data-sal-delay property to make the right container scroll in with a slight delay. I used exactly the same settings for the following groups of images and text.

For the icon boxes at the bottom, I used the following attribute-value pairs:

First Container

Second Container

Third Container

Again, note the slight delay between the values that contribute to the elements not scrolling up exactly the same time.

Finally, for the bottom Call to Action section, I used the following attribute-value pairs.

If you don’t want any changes to the animation behavior on mobile devices smaller than 768px, you don’t need the switchAnimations function at all. You can simply initialize the animation once without any condition or function calls. Here’s how:

const animation = sal();

Need help on customizing GeneratePress or GenerateBlocks?

Get in Touch

Helpful info

Adding CSS

Adding PHP

Using a child theme

Keep up to date with newly released articles

Sign up to the Knowledge Base newsletter

Please leave this field empty

You will only receive an email when new content is added in the Knowledge Base. No spam, that's a promise!

Thanks for subscribing! Please, check your inbox or spam folder to confirm your subscription.