Timeline with asynchronous call is not working as expected

[LeoSeyers]

Describe the bug My timeline animation is not working as expected when I try to use the timeline method in an asynchronous way. I was initially trying to create a scroll-based animation using Intersection Observer and narrowed my issue with a setTimeout() function.

To Reproduce I've made a codepen, see there : https://codepen.io/LeoSeyers/pen/poyLORM In a nutshell

tl.add({
  scale: [1, 3]
}).add({
  scale: [3, 5]
})

setTimeout(() => {
  tl.add({
    scale: [5, 7]
  });
}, 1500);

Expected behavior This is sort of unexpected. See previous code or Codepen : once the asynchronous call is made, the transition is started from value 1 instead of expected start value of 5.

Desktop (please complete the following information):

• OS: W10
• Browser Chome
• Version latest

[sadeghbarati]

time offset or promise is best way but here a simple solution

https://codepen.io/riccardo051/pen/wvGjogw?editors=1111

[sadeghbarati]

The thing that anime missing is named timeline, like Gsap

[LeoSeyers]

hello @sadeghbarati, thanks for your answer.

It's not clear from your code, do I need to use the pause() method on the complete callback to make that properly working?

I've tried with promises and other stuff but always ended with the same visual bug as described in original post. Your code is actually working but it looks overengineered and verbose (compared to the simplicity of what I want to achieve, my actual code is actually already complex and I don't want to increase this complexity)

while in gsap the exact same code is causing no issue : https://codepen.io/LeoSeyers/pen/ExKEGWy named timeline is handy but I don't need it in my project, I wish I could use animejs for this one but I'm still ending using gsap

[sadeghbarati]

I actually use anime coz its not heavy like other animations platforms

the anime documentation is so easy to understand but not cover all things up like GSAP Doc and especially GSAP Forums

@juliangarnier