DEV Community

Discussion on: The case for async/await-based JavaScript animations

Collapse
 
levitabris profile image
Wei Li • Edited

This is amazing! This is absolutely the most elegant way to write web animation I know. But my brain hurts when reasoning with awaits. Anyway I could insert thousands of await keyframes using supposedly a long JSON array?

P.S. I got here from Shifty's Github page.

Collapse
 
jeremyckahn profile image
Jeremy Kahn

Hey! Sorry, I didn't see this until now. There shouldn't be any limit to how many tweens (or other Promises) you sequence via await, but you may run into performance issues if you're running thousands of animations concurrently.

I hope this helps!

Collapse
 
levitabris profile image
Wei Li

Thanks for the explanation, Jeremy!

For anyone with the same problem, I found it can be done easily via a for loop, such as:

 for (const position of arr) {
        await tweenable.tween(transformTo(position))
    }
Enter fullscreen mode Exit fullscreen mode

Vanilla is the best.

BTW, I'm looking for ways to maintain a global timeline as this approach restarts a new clock when a new Tweenable is created. Therefore, I cannot use Tweenable.seek() to revert the animation to, say the 3rd animation sequence, when the 20th animation of the sequence is currently running (seek(0) will only start over the 20th animation itself).

One way I can think of is to memorize the time taken for each step of the entire animation in an array and recreate the animation with two adjacent keyframes in vanilla js, which doesn't look nice, I suppose... Any suggestions?

Thread Thread
 
jeremyckahn profile image
Jeremy Kahn

Yeah, you touched on something I'd really like to add to Shifty at some point: sequencing! Shifty does have a Scene class, but I don't think it'll cover your whole use case here. I think what you're looking for could be achieved with a small, lightweight library on top of Shifty. I explored doing as much myself some time ago, but then got distracted by some other projects. I think Shifty is flexible enough where this sort of layer on top of it should be very achievable.

If you wind up writing something for this, please do let me know! I'd love to get it merged into Shifty is that's something you'd be interested in. 🙂