I'm triggering an animation on multiple elements when they are visible in the viewport with waypoints but I run into some problems with animations not working correctly.
What is happening here is that the animations look smooth and correct but are fired on all elements when I scroll a new .sequential element in the viewport. Even the ones that are already animated This is obviously because I target that class in the code. You can see that flickering.
This is how it looks: https://watch.screencastify.com/v/cIKae7lQKMtw4zCXlTlG
This is the code:
$('.sequential').waypoint(function() {
var CSStransforms = anime({
targets: '.sequential',
opacity: [0, 1],
translateY: [50, 0],
delay: anime.stagger(100),
easing: 'cubicBezier(.71,-0.77,.43,1.67)'
});
}, {
offset: '100%'
});
What I need to do is to instead target 'this.element' in the code instead of the class. It works but the animation is fired at the same time if multiple elements are visible and the animation is not looking as good.
This is how it looks: https://watch.screencastify.com/v/69SVdcXsTywYeYuC6LwQ
This is the code:
$('.sequential').waypoint(function() {
var CSStransforms = anime({
targets: this.element,
opacity: [0, 1],
translateY: [50, 0],
delay: anime.stagger(100),
easing: 'cubicBezier(.71,-0.77,.43,1.67)'
});
}, {
offset: '100%'
});
How can I make the animation be more sequential even if there are multiple elements visible?
If anyone is looking. This is how I finally solved it. turns out I had to target a wrapping element with waypints before I could call the animation.
$(".anime").waypoint(function() {
anime.timeline({
loop: false
}).add({
targets: this.element.querySelectorAll('.sequential'),
translateY: [50, 0],
opacity: [0, 1],
duration: 500,
delay: (el, i) => 100 * i,
easing: 'cubicBezier(.71,-0.77,.43,1.67)'
});
}, {
offset: '100%'
});