Run animation based of class - Delay

[Ainsley Clark]

I'm wondering if there is a way to run a delayed animation based on a class. For example, if there is 10 children in an element, the 5th element has a different class and should run a different animation.

I have a workaround but not so sure it's achievable without iterating over the elements.

const timeline = anime.timeline({
	autoplay: false,
});
textWrapper.querySelectorAll(".letter, .mark").forEach((child, index) => {
	const delay = index * 50;
	if (child.classList.contains("letter")) {
		timeline.add({
			targets: child,
			translateY: [100,0],
			translateZ: 0,
			opacity: [0,1],
			easing: "easeOutExpo",
		}, delay);
	} else if (child.classList.contains("mark")) {
		timeline.add({
			targets: 'h1 .mark',
			scale: [3.6, 1],
			opacity: [0, 1],
			rotateZ: [45, 0],
			easing: "easeInOutExpo",
		}, delay)
	}
});
timeline.play()

If this is possible, it would be great to feature it in the docs.

Many thanks in advance!

[manake]

This "workaround" isn't a workaround, it's the correct way to do it.

IMO, anime.js should be kept as simple as possible and you should create your own logic for most things, like you did.