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.