CODEWITHSUNDEEP
javascriptjquery-waypointsanime.js
Joel Alexandersson
Joel Alexandersson

Reputation: 33

Trigger anime.js animation when element enters viewport with waypoints

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?

Upvotes: 1

Views: 1506

Answers (1)

Joel Alexandersson
Joel Alexandersson

Reputation: 33

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%'
});

Upvotes: 1

Related Questions