begin and complete callbacks causing inconsistencies in timelines

[cysabi]

Describe the bug Callbacks run at unexpected times when introduced in a timeline

For example, this code below works fine for certain targets, but sometimes, the animation will just not work. From my testing it seems to be those that are classes, but that's anecdotal

    anime
      .timeline({
        duration: 400,
        easing: "easeInOutExpo",
        delay: anime.stagger(60),
      })
      .add({
        targets: ahide,
        opacity: 0,
        scale: 0.9,
        complete: () => {
          shide.forEach((el) => (el.style.display = "none"))
          sshow.forEach((el) => (el.style.display = ""))
        },
      })
      .add({
        targets: ashow,
        opacity: 1,
        scale: 1,
      })

However, if I decide to move the second timeline event into the complete callback, and readjust accordingly, everything works fine.

    anime({
      duration: 400,
      easing: "easeInOutExpo",
      delay: anime.stagger(60),
      targets: ahide,
      opacity: 0,
      scale: 0.9,
      complete: () => {
        shide.forEach((el) => (el.style.display = "none"))
        sshow.forEach((el) => (el.style.display = ""))
        anime({
          duration: 400,
          easing: "easeInOutExpo",
          delay: anime.stagger(60),
          targets: ashow,
          opacity: 1,
          scale: 1,
        })
      },
    })

Additional context https://github.com/cq-overlays/cg-offthedial/blob/701908701fc5434a5ecc34e6af5851ebcad1b778/src/break.jsx#L79-L98

[juliangarnier]

For example, this code below works fine for certain targets, but sometimes, the animation will just not work.

Can you share a CodePen or similar showcasing your problem?

(Children callbacks in TL has been greatly improved in the upcoming V4.)

[cysabi]

i can try! it's quite tricky for me to understand where the issue is exactly coming from and how to isolate it, but i'll see what i can do

[LinBaoGe]

For example, this code below works fine for certain targets, but sometimes, the animation will just not work.

Can you share a CodePen or similar showcasing your problem?

(Children callbacks in TL has been greatly improved in the upcoming V4.)

It would be fantastic to see your V4!