{"id":2225,"date":"2021-01-20T10:30:00","date_gmt":"2021-01-20T10:30:00","guid":{"rendered":"https:\/\/www.gmitropapas.com\/?post_type=knowledgebase&p=2225"},"modified":"2024-02-28T18:53:15","modified_gmt":"2024-02-28T18:53:15","slug":"scrolling-animation-effects-in-generateblocks-pro","status":"publish","type":"knowledgebase","link":"https:\/\/www.gmitropapas.com\/generatepress-tips-and-tricks\/generateblocks\/scrolling-animation-effects-in-generateblocks-pro\/","title":{"rendered":"Scrolling animation effects in GenerateBlocks Pro"},"content":{"rendered":"
\n\nClick to view effect in action<\/a>\n\n<\/div>\n\n\n

The new GenerateBlocks Pro<\/a> 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<\/strong> to a GenerateBlocks container<\/strong>. Amongst other things, this gives us the ability to integrate various JavaScript libraries<\/strong> that make use of those custom attributes. One of those libraries is a very lightweight scrolling library called Sal.js<\/a>.<\/p>\n\n\n\n

Sal.js<\/strong> (Scroll Animation Library)<\/a> is a performance-focused, lightweight (less than 2.8 kb) scroll animation library, written in vanilla JavaScript<\/strong> 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<\/strong>, which gives an amazing performance in terms of checking the element’s presence in the viewport.<\/p>\n\n\n\n

To download the library, head over to the GitHub repository<\/a>, select the green Code<\/code> button and from the dropdown that appears select Download ZIP<\/strong>. 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<\/strong> and sal.js<\/strong> files located inside sal-master->dist<\/strong> 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<\/strong> (or any name you want). We are going to use that file as our initialization script<\/strong>.<\/p>\n\n\n\n

In my case, I am going to use the library for the Create Advanced<\/a> homepage of my agency website. The following code added to functions.php<\/strong> will enqueue the files only for the homepage. <\/p>\n\n\n\n

function gm_enqueue_sal_scripts() {\n    if( is_front_page() )\n    {\n        wp_enqueue_style( 'sal', get_stylesheet_directory_uri() . '\/sal\/sal.css' );\n\t\twp_enqueue_script( 'sal', get_stylesheet_directory_uri() . '\/sal\/sal.js', array(), false, true );\n\t\twp_enqueue_script( 'sal-init', get_stylesheet_directory_uri() . '\/sal\/sal-init.js', null, null, true );\n    }\n}\n\nadd_action( 'wp_enqueue_scripts', 'gm_enqueue_sal_scripts' );<\/pre>\n\n\n\n
To include the scripts for the whole website just remove the is_front_page()<\/a><\/code> conditional.<\/p>\n\n\n\n
function gm_enqueue_sal_scripts() {\n\n    wp_enqueue_style( 'sal', get_stylesheet_directory_uri() . '\/sal\/sal.css' );\n    wp_enqueue_script( 'sal', get_stylesheet_directory_uri() . '\/sal\/sal.js', array(), false, true );\n    wp_enqueue_script( 'sal-init', get_stylesheet_directory_uri() . '\/sal\/sal-init.js', null, null, true );\n\n}\n\nadd_action( 'wp_enqueue_scripts', 'gm_enqueue_sal_scripts' );<\/pre>\n\n\n\n
Finally, I entered the following into the sal-init.js<\/strong> to initialize the script and also disable the scrolling animation effect for mobile devices.<\/p>\n\n\n\n
const animation = sal();\n\nconst switchAnimations = () => {\n  if (window.innerWidth < 768) {\n    animation.reset();\n    animation.disable();\n  } else {\n    animation.reset();\n    animation.enable();\n  }\n};\n\nswitchAnimations();\nwindow.addEventListener('resize', switchAnimations);<\/pre>\n\n\n\n
For more information on initialization options, check the Sal.js library documentation<\/a>.<\/p>\n\n\n\n
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<\/strong> section on the right. Expand it and start adding your attribute-value<\/code> pairs. For the first image and text below the fold, I added the following attributes to the containers:<\/p>\n\n\n\n
Left Container<\/h3>\n\n\n\n
Attribute<\/th>Value<\/th><\/tr><\/thead>
data-sal<\/td>slide-right<\/td><\/tr>
data-sal-easing<\/td>easeInOutSine<\/td><\/tr>
data-sal-duration<\/td>600<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Right Container<\/h3>\n\n\n\n
Attribute<\/th>Value<\/th><\/tr><\/thead>
data-sal<\/td>slide-left<\/td><\/tr>
data-sal-easing<\/td>easeInOutSine<\/td><\/tr>
data-sal-duration<\/td>600<\/td><\/tr>
data-sal-delay<\/td>100<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Note the slight delay added at the data-sal-delay<\/code> 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.<\/p>\n\n\n\n
For the icon boxes at the bottom, I used the following attribute-value<\/code> pairs:<\/p>\n\n\n\n
First Container<\/h3>\n\n\n\n
Attribute<\/th>Value<\/th><\/tr><\/thead>
data-sal<\/td>slide-up<\/td><\/tr>
data-sal-easing<\/td>easeInOutSine<\/td><\/tr>
data-sal-duration<\/td>600<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Second Container<\/h3>\n\n\n\n
Attribute<\/th>Value<\/th><\/tr><\/thead>
data-sal<\/td>slide-up<\/td><\/tr>
data-sal-easing<\/td>easeInOutSine<\/td><\/tr>
data-sal-duration<\/td>600<\/td><\/tr>
data-sal-delay<\/td>100<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Third Container<\/h3>\n\n\n\n
Attribute<\/th>Value<\/th><\/tr><\/thead>
data-sal<\/td>slide-up<\/td><\/tr>
data-sal-easing<\/td>easeInOutSine<\/td><\/tr>
data-sal-duration<\/td>600<\/td><\/tr>
data-sal-delay<\/td>200<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
Again, note the slight delay between the values that contribute to the elements not scrolling up exactly the same time.<\/p>\n\n\n\n
Finally, for the bottom Call to Action<\/strong> section, I used the following attribute-value<\/code> pairs.<\/p>\n\n\n\n
Attribute<\/th>Value<\/th><\/tr><\/thead>
data-sal<\/td>fade<\/td><\/tr>
data-sal-easing<\/td>easeInOutSine<\/td><\/tr>
data-sal-duration<\/td>1000<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
If you don’t want any changes to the animation behavior on mobile devices smaller than 768px<\/code>, you don’t need the switchAnimations<\/code> function at all. You can simply initialize the animation once without any condition or function calls. Here’s how:<\/p>\n\n\n\n
const animation = sal();<\/pre>\n\n\n
\n\nClick to view effect in action<\/a>\n\n<\/div>","protected":false},"excerpt":{"rendered":"
Here is how to include scrolling animation effects in GenerateBlocks Pro utilizing a very lightweight animation library. <\/p>\n
Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"Here is how to include scrolling animation effects in GenerateBlocks Pro utilizing a very lightweight animation library.","_seopress_robots_index":"","_vp_format_video_url":"","_vp_image_focal_point":[]},"knowledgebase_cat":[36],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase\/2225"}],"collection":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/comments?post=2225"}],"version-history":[{"count":1,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase\/2225\/revisions"}],"predecessor-version":[{"id":3573,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase\/2225\/revisions\/3573"}],"wp:attachment":[{"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/media?parent=2225"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/www.gmitropapas.com\/wp-json\/wp\/v2\/knowledgebase_cat?post=2225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}