Adding and removing CSS classees with Stagger + onBegin / onComplete

[monolithMktg]

As the title suggests, looking for a way to add the active class on current staggering element of the array this.dom.svgElevationFloors at onBegin callback and removing the class when the current item's animation gets completed. I know my callback is flawed but yeah this is what I could manage. Would really appreciate any help here:

animate(this.dom.svgElevationFloors, {
  delay: stagger(100, { reversed: true }),
  autoplay: false,
  onBegin: (el, i) => el.classList.add('active'),
  onComplete: (el, i) => el.classList.remove('active')
});

[TargiX]

onBegin / onComplete receive the animation instance, not (element, index). Also, with animate(targets, ...) they belong to the single animation, so a staggered delay does not make the callbacks run once per target.

For per-element callbacks, use a timeline and pass stagger() as the timeline position (the third argument to add). Anime.js then creates one child animation per target, so each callback receives a self.targets containing that element:

import { createTimeline, stagger } from 'animejs';

const animation = createTimeline({
  autoplay: false,
}).add(
  this.dom.svgElevationFloors,
  {
    // Your animated properties go here, for example:
    // opacity: [0, 1],
    // duration: 500,

    onBegin: ({ targets: [el] }) => {
      el.classList.add('active');
    },

    onComplete: ({ targets: [el] }) => {
      el.classList.remove('active');
    },
  },
  stagger(100, { reversed: true }),
);

The important difference is moving stagger(...) from delay to the timeline position argument.

This behavior is documented under timeline position staggering: callbacks on the staggered animation are called for every target. The callback argument itself is the animation, as described in the onBegin docs.

[monolithMktg]

Brilliant. Thanks a lot.
Btw, your portfolio is sick!!

[TargiX]

Glad it helped, and thank you! Could you please mark the answer as accepted as well? That will make the solution easier to find for others.

[monolithMktg]

Yeah, sorry. Done!

[monolithMktg]

@TargiX I had to reopen this because although I don't get any console errors, this approach seems to instantly apply the onComplete event as well which removes any delay between onBegin and onComplete.

I want the class to be applied, wait for 500ms and then run the onComplete and remove the class.

Could you please help?
Here's the PEN

[TargiX]

@monolithMktg Good catch - I reproduced this with your Pen.

The stagger itself is working. The issue is that each child animation has no animatable property, so there is no tween to occupy the 500ms. As a result, onBegin and onComplete fire back-to-back at each staggered position.

For a class-only effect, timer children are a better fit:

import { createTimeline } from 'https://esm.sh/animejs';

const boxes = document.querySelectorAll('.box');
const animation = createTimeline({ autoplay: false });

boxes.forEach((el, index) => {
  animation.add(
    {
      duration: 500,
      onBegin: () => el.classList.add('active'),
      onComplete: () => el.classList.remove('active'),
    },
    index * 100,
  );
});

animation.play();

I tested the timings: each box starts 100ms after the previous one and keeps the class for the full 500ms before onComplete removes it.

If you need the reversed order from your original example, use:

const boxes = [...document.querySelectorAll('.box')].reverse();

Anime.js supports this overload as timeline.add(timerParameters, position).

[monolithMktg]

Thanks, man.