CODEWITHSUNDEEP
javascriptjqueryjquery-waypointsanime.jswaypoint
Biels
Biels

Reputation: 342

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

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?

Upvotes: 2

Views: 599

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337610

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

Upvotes: 2

Related Questions