Non-Linear Path Easing for Layout Animations #3188
EladBezalel
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Hey!
While experimenting with layout animations, I noticed a limitation in Motion’s current system: layout transitions apply easing uniformly across all axes (x/y), making it impossible to warp the path of an animation independently for X/Y directions.
For example, if an element moves from (100, 100) to (200, 300), the path is always a straight line with easing applied to time. What if we want:
The X-axis to ease in a sine wave?
The Y axis to ease with a cubic curve?
also applies for width and height.
i've created a small demo explaining it better:
https://codesandbox.io/p/sandbox/5fk2sm
Screen.Recording.2025-05-06.at.2.04.00.mov
what do you think?
Beta Was this translation helpful? Give feedback.
All reactions