If you "solve" it with a ref, you're not gonna have an animation the second time at all. But this issue is what would happen if you were to quickly switch tabs yourself (when using our KeepAlive-like component). To verify your components are resilient to this, we simulate unmounting and remounting with restored state right away. Like if you switch Feed -> Profile -> Feed, and we mount Feed with the previous state so that input aren't lost. The reason we introduced it is we'd like to add a feature similar to KeepAlive in Vue that remounts a component with existing state. The default behavior (without a ref) is usually the correct one. It's hard to suggest something more specific though because I'm not familiar with common GSAP patterns. If it has "effect" in the name or takes dependencies as arguments, it's probably not a good candidate for a custom Hook. We don't recommend people to create "overly generic" Hooks. Please let me know if more details would be helpful! Or feel free to file an issue in the React tracker for more discussion.ĭo you see any issues with putting that inside a hook like this? This also lets you hide any quirks behind them. If there are some particularly common patterns for using GSAP with React, it would make sense to expose them as custom Hooks with React-leaning APIs rather than using GSAP directly. (However, the "symmetrical" setup/cleanup approach in this post makes a lot of sense to me! And if the animations are truly interruptible - which is ideal - then there should not be any visible effect from double-calling at all.) I wonder if there is some other way to call GSAP API in a way that the last call "wins" - i.e., express it as synchronization? That would resolve the issue.Īlternatively, you can track whether it has already ran manually: I don't know enough about GSAP so I can't tell whether this behavior is intentional or not. See the Pen ZEvryNb by gaearon-the-encoder ( on CodePen The issue can be reproduced in vanilla JS if you call om twice: Would be safe to re-run at any point because it just "re-synchronizes" some information. Effects act like a synchronization mechanism: they let you "mirror" some state into some imperative change in the DOM. In general, React leans towards assuming that effects are safe to re-run extra times. It's more of a temporary workaround while the libraries are getting updated, not a permanent strategy. We would generally not recommend disabling Strict Mode. onComplete: New in 2.0.0: specifies a callback to be called when the animation completes.Hi folks! This is Dan (from React).If set to false after the fade-in animation completes, the children will fade out one by one. visible: New in 2.0.0: If not undefined, the visible prop can be used to control when the fade in occurs.Override the HTML element wrapped around each child element. Override the HTML element of the wrapping div. Adds a className prop to each child div, allowing you to style the direct children of the FadeIn component. Adds a className prop to the container div. Duration of each child's animation in milliseconds. Delay between each child's animation in milliseconds. Note: To have children animate separately, they must be first-level children of the component (i.e.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |