Скачать или смотреть How to Prevent Animations from Retriggering on React Page Refresh with Framer Motion

Discover how to ensure `Framer Motion` animations in React only trigger on users' first scroll, preventing retriggering upon refresh.
---
This video is based on the question https://stackoverflow.com/q/63817826/ asked by the user 'Kryptikk21' ( https://stackoverflow.com/u/14250021/ ) and on the answer https://stackoverflow.com/a/63830866/ provided by the user 'indyanin' ( https://stackoverflow.com/u/10702224/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: React.Js + Framer Motion animate only on initial page load

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Prevent Animations from Retriggering on React Page Refresh with Framer Motion

When creating dynamic web applications, it's common to use animations to enhance user experience. However, one challenge that developers often face is ensuring that these animations only trigger when appropriate. In this guide, we’ll explore how to configure Framer Motion animations in a React project to activate only during the user's first scroll, even after refreshing the page.

The Problem at Hand

While working on a recent React project, I encountered an issue with Framer Motion animations that triggered every time the page was refreshed or when users scrolled after returning to the page. This means that regardless of whether the component had previously been viewed in the user's viewport, the animations would re-trigger, leading to an unintended repetitive effect.

What Makes It Challenging?

The default behavior of Framer Motion makes it animate components from their initial state every time they are mounted. If you're expecting the animations to only play the first time the user scrolls past a component, you’ll need to circumvent this default behavior.

A Solution That Works

To ensure animations trigger only once during the user's session, we can use local storage to remember whether the animation has already occurred. Here’s how to implement a custom hook that will help us achieve this.

Creating a Custom Hook

The custom hook will save the time of the last animation trigger in local storage and compare it upon each page load. Below is an implementation of this concept:

[[See Video to Reveal this Text or Code Snippet]]

Incorporating the Hook in Your Component

Now that we have our custom hook ready, we can integrate this into our Banner component as follows:

[[See Video to Reveal this Text or Code Snippet]]

What Changes Were Made?

Using useIntro: We begin by checking whether the animation has already been triggered using our useIntro hook.

Animation Control: In the animate prop, we now include showAnimation, ensuring the animation plays based on its value.

Conclusion

By implementing the custom hook and adjusting our component, we effectively prevent Framer Motion animations from firing on every page refresh. Now, your animations will engage users only when they encounter the component for the first time in their viewport.

This approach can enhance the overall user experience, making your application feel more responsive and engaging. Happy coding!