Animate elements with the same class individually with waypoints.js and anime.js

Question

I have this script that animates a title when it enters the viewport with viewport.js and anime.js:

$(".title").waypoint(function() {
anime.timeline({loop: false})
  .add({
    targets: '.title span',
    rotateY: [-90, 0],
    duration: 1300,
    delay: (el, i) => 45 * i
  });
}, {
            offset: '100%'
});

When I use the .title class multiple times, all the titles will animate again when another enters the viewport. Do I make a copy of the script with .title1, .title2 etc? Or is there a shorter way?

score 1 · Accepted Answer · answered Mar 17 '21 at 15:24

The issue is because the .title span selector in targets selects all the elements.

To select only the element relevant to the waypoint which has been triggered, use this.element. From there you can find the span element(s) to call anime on. Try this:

$(".title").waypoint(function() {
  anime.timeline({
    loop: false
  }).add({
    targets: this.element.querySelectorAll('span'),
    rotateY: [-90, 0],
    duration: 1300,
    delay: (el, i) => 45 * i
  });
}, {
  offset: '100%'
});

Animate elements with the same class individually with waypoints.js and anime.js

1 Answers1