January 14, 2019

Scroll Animations

Slide, Fade and Overlay Animations Triggered on Scroll

Scroll Animations simply uses JS to constantly watch certain items on the page based off of an identifying class. When these items scroll into view, a class is added to the parent div which allows us to control the animation/ transition of the element. By using simple CSS transforms, we can create slide animations, fade animations, and other more custom animations with ease.

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 view port. 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 is re-set and 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 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.

    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 view-port allows developers to create any custom CSS animation they would like. It is very possible to trigger keyframe animations or even add JS animations when an element reaches the viewport for even more customized animations.