Author
Chris Tremoglie
Minute
Read
Development
Scroll down the page, trigger animations, delight your users, repeat.
Triggering animations upon scroll uses JS to constantly watch certain items on the page based on an identifying class. When these items scroll into view, a class is added to the parent div that allows us to control the animation or transition of the element. By using simple CSS transforms, we can create slide animations, fade animations, and other more custom animations with ease.
Here’s how to structure scroll animations
The function ScrollViewActive() sets what element is watched by the JS. Using the percentage variable, you can manually set the percent from which the class is added from the bottom of the viewport. You could also change the “percentage” variable to “pixel” for a px distance instead. All items debounce after they are not in view, so the animation resets and is ready to go again.
window.addEventListener('scroll', throttle(function() {
elementFromTop(document.querySelectorAll('.scroll-view-bottom'), 'scroll-effect', 90, 'percent');
elementFromTop(document.querySelectorAll('.scroll-view'), 'scroll-effect', 70, 'percent');
elementFromTop(document.querySelectorAll('.scroll-view-center'), 'scroll-effect', 60, 'percent');
}, 100), false);
From there, simply identify the content to animate and wrap the item with two div containers. The outer most div container should be set with the class “scroll-view” and inner most with a class which defines what type of transition you want to apply.
The identifying class used in the example is “scroll-view“, which is watched by the JS. When these elements enter the view-port, the class “scroll-effect” is added to the outer most container, thus triggering any CSS animations we have set. Multiple “scroll-view” classes can negatively affect performance since multiple classes must be watched.
The demo included below contains three different styles of transitions
- Slide Content : Content slides in from the left, right, top or bottom of the container.
- Overlay Content : Content contains a black overlay which slides to reveal the content behind.
- Multiple Overlay Content : Content contains two overlays which transition with a delay, giving a more stylized effect to the animation.
- Fade Content : Content fades in when it scrolls into view
Additional JS is required for the Slide Content Animations. slideShowInit() takes each child element of the parent container and sets its width and height. It then takes the children inside of the container and transforms it out of the container, thus prepping it for the scroll effect class which slides it back into position based off of the class added.
$('.slide-show-content').each(function(){
var height = $(this).height();
var width = $(this).width();
$(this).css('height', height);
$(this).css('width', width);
$(this).children().css('width', width);
$(this).children().css('height', height);
if ($(this).hasClass('slide-from-bottom')) { $(this).children().css('transform','translateY('+height+'px)'); }
if ($(this).hasClass('slide-from-top')) { $(this).children().css('transform','translateY(-'+height+'px)'); }
if ($(this).hasClass('slide-from-left')) { $(this).children().css('transform','translateX(-'+width+'px)'); }
if ($(this).hasClass('slide-from-right')) { $(this).children().css('transform','translateX('+width+'px)'); }
});
With this set up it is easy to create any custom animation. The core idea of adding the class “scroll-effect” to any “scroll-view” div when it is in the viewport allows developers to create any custom CSS animation they would like. It’s possible to trigger keyframe animations or even add JS animations when an element reaches the viewport for even more customized animations, too.
