Activate CSS3 animation when the content scrolls into view

Question

I have a bar chart that animates with CSS3 and the animation currently activates as the page loads.

The problem I have is that the given bar chart is placed off screen due to lots of content before it so by the time a user scrolls down to it, the animation has already finished.

I was looking for ways either through CSS3 or jQuery to only activate the CSS3 animation on the bar chart when the viewer sees the chart.

<div>lots of content here, it fills the height of the screen and then some</div>
<div>animating bar chat here</div>

If you scroll down really fast right after page load, you can see it animating.

Here is a jsfiddle of my code. Also, I dont know if this matters, but I have several instances of this bar chart on the page.

I have come across a jQuery plug-in called waypoint but I had absolutely no luck getting it to work.

If someone could point me in the right direction, it would be really helpful.

Thanks!

Answer 1

Capture scroll events

This requires using JavaScript or jQuery to capture scroll events, checking each time a scroll event fires to see if the element is in view.

Once the element is in view, start the animation. In the code below, this is done by adding a "start" class to the element, that triggers the animation.

Updated demo

HTML

<div class="bar">
    <div class="level eighty">80%</div>
</div>

CSS

.eighty.start {
    width: 0px;
    background: #aae0aa;
    -webkit-animation: eighty 2s ease-out forwards;
       -moz-animation: eighty 2s ease-out forwards;
        -ms-animation: eighty 2s ease-out forwards;
         -o-animation: eighty 2s ease-out forwards;
            animation: eighty 2s ease-out forwards;
}

jQuery

function isElementInViewport(elem) {
    var $elem = $(elem);

    // Get the scroll position of the page.
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html');
    var viewportTop = $(scrollElem).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    // Get the position of the element on the page.
    var elemTop = Math.round( $elem.offset().top );
    var elemBottom = elemTop + $elem.height();

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop));
}

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    // If the animation has already been started
    if ($elem.hasClass('start')) return;

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    }
}

// Capture scroll events
$(window).scroll(function(){
    checkAnimation();
});

Answer 2

Sometimes you need the animation to always occur when the element is in the viewport. If this is your case, I slightly modified Matt jsfiddle code to reflect this.

jQuery

// Check if it's time to start the animation.
function checkAnimation() {
    var $elem = $('.bar .level');

    if (isElementInViewport($elem)) {
        // Start the animation
        $elem.addClass('start');
    } else {
        $elem.removeClass('start');
    }
}

Answer 3

In order to activate a CSS animation, a class needs to be added to the element when this becomes visible. As other answers have indicated, JS is required for this and Waypoints is a JS script that can be used.

Waypoints is the easiest way to trigger a function when you scroll to an element.

Up to Waypoints version 2, this used to be a relatively simple jquery plugin. In version 3 and above (this guide version 3.1.1) several features have been introduced. In order to accomplish the above with this, the 'inview shortcut' of the script can be used:

1. Download and add the script files from this link or from Github (version 3 is not yet available through CDNJS, although RawGit is always an option too).

2. Add the script to your HTML as usual.

   <script src="/path/to/lib/jquery.waypoints.min.js"></script>
   <script src="/path/to/shortcuts/inview.min.js"></script>
   

3. Add the following JS code, replacing #myelement with the appropriate HTML element jQuery selector:

   $(window).load(function () {
       var in_view = new Waypoint.Inview({
           element: $('#myelement')[0],
           enter: function() {
               $('#myelement').addClass('start');
           },
           exit: function() {  // optionally
               $('#myelement').removeClass('start');
           }
       });
   });
   

We use $(window).load() for reasons explained here.

Updated Matt's fiddle here.

Answer 4

In addition to these answers please consider these points :

1- Checking the element in view has many considerations :
How to tell if a DOM element is visible in the current viewport?

2- If someone wanted to have more control over the animation (e.g. set "the animation type" and "start delay") here is a good article about it :
http://blog.webbb.be/trigger-css-animation-scroll/

3- And also it seems that calling addClass without a delay (using setTimeout) is not effective.

Answer 5

CSS FOR TRIGGER : 
.trigger{
  width: 100px;
  height: 2px;
  position: fixed;
  top: 20%;
  left: 0;
  background: red;
  opacity: 0;
  z-index: -1;
}
<script>
$('body').append('<div class="trigger js-trigger"></div>');

        $(document).scroll(function () {


           $('YOUR SECTIONS NAME').each(function () {

               let $this = $(this);

               if($this.offset().top <= $('.js-trigger').offset().top) {

                   if (!$this.hasClass('CLASS NAME FOR CHECK ACTIVE SECTION')) {
                       $this
                           .addClass('currSec')
                           .siblings()
                           .removeClass('currSec');

                   }
               }

           });

        });
</script>