But as you confirmed Figma doesn’t handle overdamped springs, and instead limits the damping ratio to 1. I see that the animations for underdamped and critically damped springs appear correct on figma. I largely understand what you are trying to explain. To address this, the duration you see today is carefully tuned constant to produce more “meaningful” and round numbers within the ballpark of bezier animations, even though the animation doesn’t technically end there. This made it harder to share intuition between spring and bezier animations for context, a 1000ms bezier animation would be considered really long. However, it wasn’t very helpful because durations calculated this way tended to be seemingly random numbers (like 1361ms) and really really large, much longer than the animation “appeared” to take. For this reason, most spring libraries don’t actually take in duration, but instead other, more fundamental constants such as Mass, Stiffness, Damping, and Damping Ratio.īut what is the duration you do see in Figma? In early prototypes, we surfaced the 0.1% duration to designers. In effect, objects that move shorter distances can stop animating earlier, saving CPU but breaking the notion of specifying a set duration. Other spring libraries such as React Spring and Framer Motion use a more dynamic system that looks at the object’s position and velocity to determine if the animation should end. We don’t expose this duration directly because it’s an implementation detail. Most of this animation time isn’t actually “meaningful” animation as the object moves fairly little at the end of the long tail, but it’s necessary to ensure smoothness and avoid little janks and hiccups. Internally at Figma, we use a much tighter tolerance of 0.1%, meaning that an 1000px animation would stop within 1px of the final position. If you were making an animation that travels 1000px and cut the animation off at 1.3615 seconds, it would stop 20px short of the final position, visibly snapping to the user. The step time you see in matlab is based on an approach of 2% to the final value, in this case the time it takes to reach amplitude 0.98. Unlike traditional bezier or keyframed animations, springs theoretically approach but never reach their final value. Note that it does NOT require duration! Why is this? The long answer:ĭuration is a tricky subject when it comes to springs. To get the Android animation to look like Figma, you should use 1. is correct that Figma doesn’t handle overdamped springs, and instead limits the damping ratio to 1. In your case, this comes out to 1.677, meaning it’s an overdamped spring. We don’t show this to you currently, but maybe we should in the inspect panel. In your case this is 80.ĭamping Ratio - This can be calculated based on the values in Figma with the formula: damping / (2 * Math.sqrt(stiffness * mass)). Stiffness - This can be grabbed from Figma directly.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |