elementor4fun-logo
Last update: September 10, 2018

Scroll animations with ScrollOut

ScrollOut is an awesome library, that detects changes in scroll for reveal, parallax, and CSS Variable effects!

Scroll down to the bottom of this page to see it in action.

Step 1

Download the zip file : https://scroll-out.github.io/
Then upload and enqueue the file scroll-out.min.js

wp_enqueue_script( 'scrollout-js', plugin_dir_url( __FILE__ ) . 'assets/js/scroll-out.min.js', '','', true );

[ see HOWTO to learn how to add custom files ]

Step 2

In a Code Block, add this code in the Javascript panel :

ScrollOut({  
	targets: ".banner",
	threshold:0.5,
	once: false
});;

It simply means that we target the element with the ".banner" class. The threshold is the ratio of the element that must be visible before it is marked as visible.
More info here : https://scroll-out.github.io/guide.html#configuration

ScrollOut will automatically add the attribute "data-scroll" to the element.
So now we just have to "style" it.

Note that everything is well explained in the official documentation.

Step 3

In CSS :

.banner[data-scroll] {
	transition: opacity 2s ease;
}
.banner[data-scroll="in"] {
	opacity: 1;
}
.banner[data-scroll="out"] {
	opacity: 0;
}

The following image will fade in when it appears on screen, then fade out when it disappear :

Now for the next example, we are going to use it with a gallery.

For the Javascript :

ScrollOut({  
	targets: ".oxy-gallery-item",
	threshold:0.5,
	once: false
});

and for the CSS :

.oxy-gallery-item[data-scroll] {
	transition: all 1s ease;
}
.oxy-gallery-item[data-scroll="in"] {
	opacity: 1;
	transform: translateX(0) scale(1)
}
.oxy-gallery-item:nth-child(odd)[data-scroll="out"] {
	opacity: 0;
	transform: translateX(-100%) scale(0.1)
}
.oxy-gallery-item:nth-child(even)[data-scroll="out"] {
	opacity: 0;
	transform: translateX(+100%) scale(0.1)
}

ScrollOut with Animate.css

We can also use the famous Animate.css library.

Check this example :

No CSS here as the animation is made by Animate.

So we just have to add some JS :

var el2 = document.querySelector(".banner2");
el2.setAttribute('data-scroll', '');

ScrollOut({
    onShown: function(el2) {
    // remove the class
    el2.classList.remove("animated","zoomIn");

    // force reflow
    void el2.offsetWidth;

    // re-add the animated cl
    el2.classList.add("animated","zoomIn");
  }
});
closealign-justifychevron-downcaret-up