Animation description by solely Bezier Curve is inadequate

[AndyDentFree]

A common animation technique used to draw attention to an item is a Spring Curve. It adds more liveliness.

There's an excellent example of them in Framer Classic which includes an demonstration of changing parameters used to control spring changes:

• Damping
• Duration (note this is in tokens already, used in combination with Cubic Bezier)
• Friction
• Mass
• Tension
• Velocity

As far as I can tell, the sole type for describing animation in tokens is the Cubic Bezier. The motivation for this limitation may be that CSS currently natively only supports Cubic Bezier.

However, there are multiple approaches to implementing springs. A quick search found for example that it has been seen as a need for years, with samples:

• 2013 boing
• 2016 CodePen
• 2016 article

I think it's important that design tokens provide more comprehensive support for UX animation. Tools are already ahead of the standard.

[valhead]

We’ve started with cubic beziers initially because they are so commonly used, but we are planning support for other easing types in the future. Springs and power equations are two areas we think will need to be addressed.



We are currently looking for more examples of how springs, power equations, or other non cubic bezier easing types are being used in design systems or similar contexts. These would be very useful for informing our expansion of easing support.

[NateBaldwinDesign]

Somewhat related: power, square root, and cube root curves are valuable for interpolation in color scales. So while color interpolation isn't in scope (whether for UI color generation or gradients), it's an example where design systems could use formulas other than cubic bezier.

[jlarmstrongiv]

@valhead glad to hear! To implement spring motion, I usually use:

• https://github.com/framer/motion
• https://github.com/pmndrs/react-spring

[AndyDentFree]

I am adding Spring animations into Touchgram app, which is based on SpriteKit, using the 3rd-party lib SpriteKit-Spring.

The app allows users to compose messages where they react to touches encoded in an message.

Packaging in messages iMessage and reusable designs is in a proprietary, compact, binary format.

Apple's SwiftUI has springs as a core animation type for UX, as seen in this tutorial. The packaging format for SwiftUI is Swift source code. They have the types:

• spring(response: Double, dampingFraction: Double, blendDuration: Double)
• interactiveSpring(response: Double, dampingFraction: Double, blendDuration: Double)
• interpolatingSpring(mass: Double, stiffness: Double, damping: Double, initialVelocity: Double)

[AndyDentFree]

@NateBaldwinDesign commented

while color interpolation isn't in scope

Interesting assumption.

I work with UX animation in frameworks like SwiftUI and Xamarin Forms and also 2D game animation.

It's very common to have opacity or color change with animation curves over time, often in combination with motion animation.

As a trivial example, I have a collapsing control bar. After collapsing to a tab, it slowly fades to be less noticeable.

Looking at the Transition it just says Represents a animated transition between two states

(It also has a minor bit of fluff needs removing timingFunction: The color of the shadow before the discussion of Beziers.)

My expectation is that animation is inclusive in that parameters which affect appearance and can have different values, can have animation between those values. If not, that should be explicitly distinguished. An inclusive approach maps to more frameworks and tools.