Kevin Jung Kevin Jung - 4 months ago 29
jQuery Question

Activate CSS3 animation when the content scrolls into view

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

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();
});
Comments