Optimised appear animations V2 #2440
Merged
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
shuangq
approved these changes
Dec 8, 2023
| * For synching handoff animations with the new Motion animation we want | ||
| * to ensure startTime is synchronously set. | ||
| */ | ||
| if (options.syncStart) { |
There was a problem hiding this comment.
great that we can get rid of this! 🎉
Comment on lines
+13
to
+16
| * Legacy arguments. This function is inlined as part of SSG so it can be there's | ||
| * a version mismatch between the main included Motion and the inlined script. | ||
| * | ||
| * Remove in early 2024. |
There was a problem hiding this comment.
The inlined one in the script is startOptimizedAppearAnimation, right? Is this one also inlined? 🤔
There was a problem hiding this comment.
Yeah both start and handoff get inlined - start actually applies this to window.HandoffAppearAnimation
| @@ -118,6 +118,7 @@ export const animateMotionValue = ( | |||
| * Animate via WAAPI if possible. | |||
| */ | |||
| if ( | |||
| !transition.isHandoff && | |||
There was a problem hiding this comment.
Let's add a comment here to explain why we want to animate individual transforms when it's a handoff one.
mattgperry
force-pushed
the
feature/optimised-appear-v2
branch
from
5f827aa to
e29abca
Compare
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.
This PR changes the handoff strategy of optimised appear animations.
Before
Currently, Framer runs hardware-accelerated
opacityandtransformanimations via WAAPI before React hydrates. Then, when React hydrates, Framer Motion transfersopacityto a WAAPI animation andtransformto the individual transform JS animations. This way, these animations can be interrupted independently via gestures etc as usual.The problem with this approach is the precise timing required to seamlessly transfer WAAPI animations is difficult to get right and the accuracy of reported timings is different across browsers.
Therefore, on big pages animations can appear to jump and, once on the main thread, stutter, during this period of uniquely heavy JS initialisation.
After
This PR changes the strategy to preserve the optimised WAAPI animations for as long as possible.
When we handoff, we start new JS animation for
opacityand individual transforms, same as today. The difference is we don't cancel the WAAPI animations. WAAPI/CSS animations override any changes to an element's underlying computed styles so these JS animations aren't visible.Only when a value needs to perform a different animation do we cancel the WAAPI animation. This way, we preserve the capability to interrupt transforms individually while also running an optimised animation for longer.
Because all transforms are animating via JS, cancelling the WAAPI animation from any single transform will simply "reveal" the underlying animation, which is a tidy way of allowing any one transform to interrupt the unified
transformanimation.In the majority of cases, the optimised animation will not be interrupted so we will now see an accelerated animation throughout the appear animation.
In the minority of cases where this animation is interrupted and we might have perceived a small jump or stutter, this will be improved because it is less noticeable to handoff to a different animation than an identical one.