Waypoints.js + Counter-Up 2: How do I create one waypoint trigger to change a class and trigger a counterUp func

Viewed 21

I'm trying to create a series of stats that animate in and 'count up'. I'm using waypoints.js to trigger when the animation happens (with CSS, on a class change), and Counter-up2 to animate the numbers counting up.

At the moment, I've figured out how to create a simple waypoint to change a class like this:

var $colAnim = $('.stat_col');

$colAnim.waypoint(function(){
    $(this.element).addClass('active');

}, { offset: '60%' });

And I've figured out how to trigger the counting up animation like this:

const counterUp = window.counterUp.default

var $counters = $(".number_count");

$counters.each(function (ignore, counter) {
    var waypoint = new Waypoint( {
        element: $(this),
        handler: function() { 
            counterUp(counter, {
                duration: 1000,
                delay: 16
            }); 
            this.destroy();
        },
        offset: 'bottom-in-view',
    } );
});

The problem is that I can't work out how to combine these two things in one waypoint trigger. It's important that I can add a class to the column itself, while also starting the counting up animation at the same time, as I want to add some additional entry animations to each column. To clarify, my HTML looks something like this:

<div class="columns">

    <div class="stat_col">
        <img class="icon">
        <div class="number_count">
            30
        </div>
    </div>

    <div class="stat_col">
        <img class="icon">
        <div class="number_count">
            30
        </div>
    </div>

</div>

The waypoint should target each .stat_col, add an 'active' class to it, and also start the counterup function on each .number_count

At the moment doing two separate waypoints means that the number count and the entry animations on each .stat_col are out of sync, as the column div sits higher than the number count div, and the problems are compounded once the layout changes for devices.

0 Answers
Related