Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ensure optimised appear animations are cancelled when styles differ #2772

Merged
merged 8 commits into from
Aug 29, 2024

Conversation

mattgperry
Copy link
Collaborator

@mattgperry mattgperry commented Aug 23, 2024

In Framer we provided two MotionValues for each component:

  • via values, this value handles animate/whileHover etc animations
  • via style, this value is rendered

The value provided to style is composed from other MotionValues each handling an effect, for instance scroll transform etc.

If this rendered value falls out of sync with the one being used by Motion for its internal animations, then we're in a situation where the optimised appear animation must also have fallen out of sync and we need to cancel it. This PR implements this.

@mattgperry mattgperry force-pushed the fix/cancel-on-scroll branch from 29bf229 to 12a03d3 Compare August 23, 2024 13:56
@mattgperry mattgperry requested a review from shuangq August 23, 2024 14:11
Copy link
Contributor

@shuangq shuangq left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Left some questions but looks good overall.

): string | undefined {
return visualElement.getProps()[optimizedAppearDataAttribute]
return visualElement.props[optimizedAppearDataAttribute]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this change? 👀

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Practically it doesn't make a difference but it just made the types subset of VisualElement simpler

* instance if the element's appear animation is on a different
* breakpoint.
*/
if (!valueName) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In what cases do we not provide a value name for the optimized animation?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this instance it will check for any optimised animation - for instance when determining if we fire animations on layout effect or effect

Comment on lines 401 to 403
if (!this.valueSubscriptions.has(key)) {
this.bindToMotionValue(key, value)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also don't fully understand this change, as bindToMotionValue seems to be designed to handle cases where a value subscription is present as well. 🤔

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah good catch - this is a legacy from fixing the same bug that other check fixed (that I discovered while making this PR)

appearId,
valueName
)
removeSyncCheck()
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not super familiar with the value.on API, why do we need to call removeSyncCheck again?

Copy link
Collaborator Author

@mattgperry mattgperry Aug 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Think of it like

function doThing() {
  if (someCondition) {
    // stop doing thing
    element.removeEventListener("mousestart", doThing)
  }
}

element.addEventListener("mousestart", doThing)

Comment on lines 71 to 76
if (Math.round(left) !== 300) {
showError(
box,
`optimised animation not cancelled by external value mismatch with rendered style`
)
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The opacity animation should not be canceled, right? Do we also want to check that as well?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah I'll add a check - it should be cancelled by mismatches as well

@mattgperry mattgperry merged commit d2484a8 into main Aug 29, 2024
1 check was pending
@mattgperry mattgperry deleted the fix/cancel-on-scroll branch August 29, 2024 08:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants