Is Next.js experiencing issues with animating presence specifically for exit animations?

Question

Is Next.js experiencing issues with animating presence specifically for exit animations?

I'm facing an issue with adding an exit animation to my components in next js. Despite setting an initial animation, the exit animation doesn't seem to work as expected.

Could someone please help me figure out what I'm doing wrong here?

Below is a snippet of my code for reference:

<AnimatePresence >
    <motion.div key="modalBackground" className={styles['auth-modal-layout']} key="modalBackground" initial="hidden" animate="visible" variants={
            {
                hidden:{
                    opacity:0
                },
                visible:{
                    opacity:1,
                    transition:{
                        duration:.4,
                    }
                },
            }
        } >

        <motion.div key="modalForm" className={styles['auth-modal-form']} initial="hidden" exit="pageExit" animate="visible" exit="hidden" variants={{
            hidden:{
                translateY:100,
                opacity:0
            },
            visible:{
                translateY:0,
                opacity:1,
                transition:{
                    duration:.4
                }
            },
            pageExit:{
                opacity:0,
                transition:{
                    when:"afterChildren",
                    duration:.4
                }
            }
        }} >
            {modal()}
        </motion.div>

    </motion.div>
    </AnimatePresence>

javascript css reactjs next.js framer-motion

Answer 1

Answer №1

<AnimatePresence> must enclose the component being conditionally rendered, rather than being placed inside it.

To resolve this issue, you can either elevate the <AnimatePresence> tag to a higher level or incorporate your conditional logic directly into the component. Typically, the former option is recommended:

<AnimatePresence>
    {modalIsVisible && <ModalComponent />}
</AnimatePresence>

(In this scenario, ModalComponent contains the aforementioned code).

Alternatively, you could always render the component and utilize a prop for conditional rendering of its children. However, given that you are dealing with a modal window, this approach may not be suitable.

Answer 2

<AnimatePresence> must enclose the component being conditionally rendered, rather than being placed inside it.

To resolve this issue, you can either elevate the <AnimatePresence> tag to a higher level or incorporate your conditional logic directly into the component. Typically, the former option is recommended:

<AnimatePresence>
    {modalIsVisible && <ModalComponent />}
</AnimatePresence>

(In this scenario, ModalComponent contains the aforementioned code).

Alternatively, you could always render the component and utilize a prop for conditional rendering of its children. However, given that you are dealing with a modal window, this approach may not be suitable.

Answer 3

Answer №2

If you want to achieve this effect, check out more examples here:

  <AnimatePresence>
     <motion.div
        // set initial opacity state
        initial={{ opacity: 0 }}
        // animate component appearance
        animate={{ opacity: 1 }}
        // define transition properties (e.g., duration)
        transition={{ delay: 0.5 }}
        // exit animation setup
        exit={{ opacity: 0 }}
      >
       {your_content_here}
      </motion.div>
  </AnimatePresence>

If you are encountering errors, it may not be related to nextjs. Look for issues within the code/lib of framer

Make sure you avoid typing inside your div like this (?ok 2 exit?):

initial="hidden" exit="pageExit" animate="visible" exit="hidden"

Refer to valid motion components for correct usage. Always consult the official documentation for examples.

P.S. To implement AnimatePresence on multiple pages, wrap your parent component or place the code inside your _app.js. Note that this approach loads AnimatePresence code for each page using the framer library.

function MyApp({ Component, pageProps }) {
  
  return (
    <AnimatePresence>
     <Component {...pageProps} />
    </AnimatePresence>
  )
  
}

MODIFICATION: Upon reviewing the behavior of AnimatePresence, I realized it was not functioning as expected. Here's an alternative method to achieve similar results, demonstrated in the example below.

//npm install this before: npm i react-intersection-observer
import { useInView } from "react-intersection-observer";

//define controls and inView variables in your hooks section
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
  if (inView) {
     controls.start("visible");
  }
  else {
     controls.start("hidden");
  }
}, [controls, inView]);

//implement the component with animations
<motion.div
 style={{marginTop: '1000px', marginBottom: '1000px'}}
 ref={ref}
 animate={controls}
 initial="hidden"
 transition={{ duration: 2 }}
 variants={{
     visible: { opacity: 1, scale: 1 },
     hidden: { opacity: 0, scale: 0 }
 }}

>
   <img src="https://super-monitoring.com/blog/wp-content/uploads/2020/03/framer.png"></img>
</motion.div>

I did not utilize AnimationPresence for various reasons. The issue with AnimationPresence lies in its limited ability to accurately track user position on the page. This is why the isVisible variable was introduced in framer examples. By utilizing react-intersection-observer, we can effectively detect user location. Apologies for any confusion prior to the modification.

P.S. Refer to this link for additional information.

Answer 4

If you want to achieve this effect, check out more examples here:

  <AnimatePresence>
     <motion.div
        // set initial opacity state
        initial={{ opacity: 0 }}
        // animate component appearance
        animate={{ opacity: 1 }}
        // define transition properties (e.g., duration)
        transition={{ delay: 0.5 }}
        // exit animation setup
        exit={{ opacity: 0 }}
      >
       {your_content_here}
      </motion.div>
  </AnimatePresence>

If you are encountering errors, it may not be related to nextjs. Look for issues within the code/lib of framer

Make sure you avoid typing inside your div like this (?ok 2 exit?):

initial="hidden" exit="pageExit" animate="visible" exit="hidden"

Refer to valid motion components for correct usage. Always consult the official documentation for examples.

P.S. To implement AnimatePresence on multiple pages, wrap your parent component or place the code inside your _app.js. Note that this approach loads AnimatePresence code for each page using the framer library.

function MyApp({ Component, pageProps }) {
  
  return (
    <AnimatePresence>
     <Component {...pageProps} />
    </AnimatePresence>
  )
  
}

MODIFICATION: Upon reviewing the behavior of AnimatePresence, I realized it was not functioning as expected. Here's an alternative method to achieve similar results, demonstrated in the example below.

//npm install this before: npm i react-intersection-observer
import { useInView } from "react-intersection-observer";

//define controls and inView variables in your hooks section
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
  if (inView) {
     controls.start("visible");
  }
  else {
     controls.start("hidden");
  }
}, [controls, inView]);

//implement the component with animations
<motion.div
 style={{marginTop: '1000px', marginBottom: '1000px'}}
 ref={ref}
 animate={controls}
 initial="hidden"
 transition={{ duration: 2 }}
 variants={{
     visible: { opacity: 1, scale: 1 },
     hidden: { opacity: 0, scale: 0 }
 }}

>
   <img src="https://super-monitoring.com/blog/wp-content/uploads/2020/03/framer.png"></img>
</motion.div>

I did not utilize AnimationPresence for various reasons. The issue with AnimationPresence lies in its limited ability to accurately track user position on the page. This is why the isVisible variable was introduced in framer examples. By utilizing react-intersection-observer, we can effectively detect user location. Apologies for any confusion prior to the modification.

P.S. Refer to this link for additional information.

Is Next.js experiencing issues with animating presence specifically for exit animations?

Answer №1

Answer №2

Similar questions

What is the best way to retrieve the values of a select element from LEVEL 4 within the form submission of LEVEL 3?

Difficulty parsing JSON in MVC .Net Core Controller

Challenges with Scope in Using AJAX Calls within an Infowindow

Develop a personalized conditional rendering directive in Vue.js

Using Selenium in Java to interact with popup elements

Utilize Javascript to load content dynamically while ensuring each page has a distinct link to individual content pages

Setting a default value in Vue props if it doesn't pass validation: A guide

Error: excessive recursion detected in <div ng-view="" class="ng-scope">

Receiving a "Undefined index" error while passing information to a PHP script via jQuery

Transforming query language from jQuery to Pure JavaScript

Ways to target other links exclusively during hover effect on a single link

Activate the jQuery click event by specifying the URL

What is the process for generating an alert box with protractor?

Encountering a problem with displaying error messages in an empty text field

Looking to incorporate new values without replacing them in react.js and mongoDB

Is there a way to modify a specific key value in all embedded objects using Mongoose?

Is there a method to accurately detect the rendering of individual elements within a React Component, rather than the entire component itself?

What is the solution to fixing the EPERM error that occurs while trying to run npx create-next-app@latest?

Issue with applying className to ToggleButton component in React with Material-UI

What types of modifications do ViewChildren and ContentChildren QueryLists keep an eye out for?