Is it possible to create an animation in NextJS using framer-motion that triggers only during the initial page load and resets every 12 hours?

My website has a main page that loads in with an exciting framer-motion animation. I'm trying to figure out how to make sure this animation only plays the first time the page is loaded, and not every time the page is refreshed or navigated back to. Since I am using NextJS, local storage is only accessible after the initial render inside a useEffect() hook. I'm wondering if there is a way to trigger a callback function after the motion.div animation completes so that I can set local storage at that point.

javascriptcookiesnext.jslocal-storageframer-motion

Answer №1

As per the guidelines, you have the option to disable the animation (stop firing) by changing the value of the initial props to false instead of your current animation properties (Same for the animate prop).

Switch to false to start with the values in animate (disabling the mount animation).

To achieve your desired outcome, you can easily use a useState function:

const [runAnimation,setRunAnimation] = React.useState(false)

React.useEffect(()=>{
    /* Logic to determine if the user has initiated the animation previously */

    const needToRunAnimation = ...

    if (needToRunAnimation){
        setRunAnimation(yourAnimationProperty)
    }
},[])

You can then apply the runAnimation property to control when the animation will trigger within the framer motion component.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidelines for attaining seamless motion animation utilizing devicemotion rotationRate information

I am utilizing the rotationRate data obtained from the devicemotion eventListener to manipulate a three.js scene by tilting. The scene does respond to the data accurately in terms of angle adjustments, but it produces an unsmooth motion effect. Is there a ...

javascriptthree.js

Rearrange HTML list items automatically according to changes in numeric sort order

I am working on a web page that features a dynamic ranked list. The items in the list are assigned a specific rank order number which changes based on user interactions elsewhere on the page. I have been exploring different options to automatically reorgan ...

javascripthtmllistsorting

Yeoman - A guide for integrating an express server task into Gruntfile.js from the generator-angular template

Currently, I am diving into the world of Grunt and attempting to integrate an Express server into my AngularJS application that was initially created with Yoeman. I've made adjustments to the following task as shown below: grunt.registerTask('s ...

javascriptangularjsexpressgruntjsyeoman

Explore within another map and analyze the node to spot the differences

I have some questions about iterating through a JavaScript Object and using array functions in JavaScript. Let's assume I have the following variables: var json1 = "[{"id": 1, "name":"x"}, {"id": 2, "name":"y"}]"; var json2 = "[{"id": 1, "name":"x"}, ...

javascriptarraysjson

Customizing the language parameter for the apply button script on LinkedIn

Our company's website features the AWLI button which allows users to apply for jobs using their LinkedIn profile. <div name="widget-holder"> <script type="text/javascript" src="https://www.linkedin.com/mj ...

javascripthtmllinkedin-api

Tips for executing getJSON requests one after the other

My goal is to showcase a weather forecast for a specific date on my website. Here are excerpts from the code I've used on a trial page that isn't functioning correctly: <script> function displayWeather(date){ $.getJSON(url + apiKey + "/" ...

javascriptjqueryjsonp

Guide on converting a unique JSON structure into a JavaScript object

I've been on the hunt for a solution to this unique format challenge, but have hit a dead end so far. The issue at hand is that I'm dealing with a JSON format that doesn't play nicely with mongoDB. My goal is to convert the JSON data into a ...

javascriptjsonmongodbobjectparsing

Executing Array.prototype.filter() results in an empty array being returned

I have a list of jQuery elements that I collected using the .siblings() method, and now I am trying to filter them. Here is the HTML code: <div> <div> <label for="username">Username</label> <input class="form ...

javascriptjqueryhtml

Tips for accessing the value of the range slider in Bootstrap 5 while it is being slid

Is it possible to capture the value from a Bootstrap 5 slider while sliding? I want to continuously receive the value as I move the handle, rather than only getting the final value when I release the handle. Currently, I am using a Bootstrap 5 range slide ...

javascriptjquerysliderbootstrap-5

How to dynamically change the class of an element that contains other elements using JavaScript and JQuery

I have created a blog archive with the following format: +Year +Month Title Here is a snippet of the code: <ul> <span class="toggle">+</span> <li class="year">$year <ul> <span ...

javascriptjqueryhtml

Checkbox click event not triggering properly

I am facing challenges in triggering an onclick event for the "Elevation" checkboxes located at the URL provided above. <input type="checkbox" value="A" id="elevation_A" onclick="changeElevation(this.value);" /> For some reason, the "changeElevati ...

javascriptjqueryhtml

Permanently removing artwork from the Canvas

I am facing an issue with my canvas drawing function. Whenever I clear the drawings on the background image by clicking a button, the old drawings reappear when I try to draw again. How can I permanently delete the cleared drawings so that I can start fr ...

javascriptcanvas

Access parent component's properties by clicking on child component

I'm uncertain if my current approach is the most effective solution to my issue, so I am open to alternative methods. My goal is to access the properties of the parent component when clicking on a child component (Image). Below is the code I have imp ...

javascriptreactjsreact-reduxjsx

javascript - Retrieving a JSON string

I am currently working on a stock website where I need to retrieve JSON information from either Google's API or Yahoo's API. To test this functionality, I have used a replacement function to log the data onto a text box for testing purposes. Howe ...

javascriptjqueryhtmljson

Incorporate a new JavaScript animation as the background for an established website, replacing the static background image

Seeking assistance with my portfolio as I delve into the world of Webdesign and learn the basics from templates. How can I integrate this javascript code into the background of my site, replacing the current minecraft image? Every attempt to implement it ...

javascriptjqueryhtmlcssweb

Routing with nested modules in Angular 2 can be achieved by using the same

Encountering a common issue within a backend application. Various resources can be accessed through the following routes: reports/view/:id campains/view/:id suts/view/:id certifications/view/:id Note that all routes end with the same part: /view/:id. ...

javascriptangulartypescriptroutesangular-ui-router

What is the maximum size limit for serializing data with ipCookie()?

Utilizing the angular-cookie library, which can be found here, I have encountered an issue. The documentation on this page mentions: To create a cookie use ipCookie(key, value); The value supports strings, numbers, booleans, arrays and objects and will b ...

angularjscookies

Encountering issues with Dynamic Routing in Next.js as we attempt to retrieve and showcase specific details using slugs

Seeking assistance with retrieving the unique slug for each job that has been posted. Utilizing the app router, I have configured the following page: src/app/Job/[slug]/page.js See the code snippet below: async function getJobById(slug) { const response ...

mongodbnext.jsroutesserver-side-renderingslug

Divide a JavaScript project into multiple packages using either webpack or npm

I am embarking on the development of an application that needs to be compatible with Windows (PC), Android, and iOS. To achieve this, I plan to use Electron for Windows and React Native for mobile platforms. Both applications will be built using React and ...

javascriptnode.jsnpmwebpackredux

Use promises instead of directly calling res.json(data) when working with Node.js

When I make a post request to the payment_url, it triggers the second block of my function. Unfortunately, I am unable to retrieve any data in the then method because I am unsure how to pass the data back to the resolve function. Client-side call paypal. ...

javascriptnode.jsexpresspaypal