css-houdini-drafts icon indicating copy to clipboard operation
css-houdini-drafts copied to clipboard

[css-animationworklet] Velocity-only spring use-case

Open mattgperry opened this issue 4 years ago • 0 comments
trafficstars

In the AnimationWorklet spec there's a spring example. It shows an example of an A->B transition being driven by a spring-like curve.

There is a use-case where an animation is played with the same start and end value (scale: 1), but we want that value to animate based on a velocity. For instance a like button that bounces up on click. In psuedo-code:

const scale = value(1)

spring(scale, { to: 1, velocity: 100 })

How is this achieved with AnimationWorklet? I'm struggling to see how this is possible.

mattgperry avatar Apr 26 '21 11:04 mattgperry