Scrolling animation effects in GenerateBlocks Pro

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' );
    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

AttributeValue
data-salslide-right
data-sal-easingeaseInOutSine
data-sal-duration600

Right Container

AttributeValue
data-salslide-left
data-sal-easingeaseInOutSine
data-sal-duration600
data-sal-delay100

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

AttributeValue
data-salslide-up
data-sal-easingeaseInOutSine
data-sal-duration600

Second Container

AttributeValue
data-salslide-up
data-sal-easingeaseInOutSine
data-sal-duration600
data-sal-delay100

Third Container

AttributeValue
data-salslide-up
data-sal-easingeaseInOutSine
data-sal-duration600
data-sal-delay200

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.

AttributeValue
data-salfade
data-sal-easingeaseInOutSine
data-sal-duration1000