See the Code - See it Full Page - See Details
`persist()` should be a last resort... but to get overlapping `composite: 'add'` animations to work well, it seems the only way. I'm realizing now that I'd like to do cleanup on persisted animations after they all end. My use case (I mean, it's really just me experimenting with a game mechanic in my head, not a proper use case right now)... is to allow a user to click while an object is moving and it will affect the trajectory. So you can click somewhere to launch an item linearly (`translate()`) and then click again to bend the path into a curve by adding another translation with a different easing where all the animations have `composite: 'add'`. Once the user has stopped clicking and there are no more active animations, at that point I'd like to cleanup all the animations, as I no longer need them persisted. `commitStyles()` is the standard way to capture styles and sync them to an item while safely able to remove an animation... but due to the overlapping additive animations, `commitStyles` captures the current styles at a point where at least one other animation is active and the transform breaks.
This Pen uses: HTML, CSS, JavaScript, and