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?
The issue is because the
.title span
selector intargets
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 thespan
element(s) to callanime
on. Try this: