Pregenerating keyframes for unsupported easing functions #1834
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
nvh
reviewed
Dec 16, 2022
Comment on lines
5
to
7
| !easing || | ||
| Array.isArray(easing) || | ||
| (typeof easing === "string" && supportedWaapiEasing[easing]) |
There was a problem hiding this comment.
This is pretty weird logic to me.
Why is easing always supported if easing is an array or easing is falsy?
There was a problem hiding this comment.
Easing is falsy === default easing
Easing is array === bezier curve
There was a problem hiding this comment.
Not 100% sure, but maybe we should add that as a comment. Not feeling strongly though, so do what you prefer
nvh
reviewed
Dec 16, 2022
| import { BezierDefinition, EasingDefinition } from "../../easing/types" | ||
| import { BezierDefinition, Easing, EasingDefinition } from "../../easing/types" | ||
|
|
||
| export function isEasingSupported(easing?: Easing | Easing[]) { |
There was a problem hiding this comment.
Ahhh, reading the rest of the code, I think this one needs to be called isSupportedEasing 🤯 .
And I guess isWaapiSupportedEasing would be even better.
Suggested change
| export function isEasingSupported(easing?: Easing | Easing[]) { | |
| export function isWaapiSupportedEasing(easing?: Easing | Easing[]) { |
nvh
approved these changes
Dec 16, 2022
Comment on lines
5
to
7
| !easing || | ||
| Array.isArray(easing) || | ||
| (typeof easing === "string" && supportedWaapiEasing[easing]) |
There was a problem hiding this comment.
Not 100% sure, but maybe we should add that as a comment. Not feeling strongly though, so do what you prefer
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WAAPI doesn't support custom JavaScript easing functions and has a shorter list of supported easings than Framer Motion.
In #1830 we added some approximations of unsupported easings via
cubic-bezier. This PR extends support to all easing functions by pre-generating the animation keyframes.In the future it'll be preferable to change this approach to generating a custom
linear()easing similar to Motion One, but this doesn't have wide browser support yet.