The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Question

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Source Code Repository: https://github.com/qcaodigital/cocktail_curations
Live Site:

I recently deployed my NextJS project to Netlify and everything seems to be working fine, except for one issue. Each page has an exit animation (currently set to change opacity from 1' to '0' in 1000ms). To test, I reduced the exit animation time for the "Contact Page" to 0ms.

It appears that the SCSS.module is being removed before the animation completes, as you can still see the markup on the page during the time when the animation should be happening without any styles applied.

css reactjs next.js css-modules framer-motion

Answer 1

Answer №1

Fix Module: import this to your main component

import Router from 'next/router'

export const resolveTransitionIssue = (delay: number): void => {
  Router.events.on('beforeHistoryChange', () => {
    const nodes = document.querySelectorAll('link[rel=stylesheet], style:not([media=x])')
    const copies = [...nodes].map((el) => el.cloneNode(true) as HTMLElement)

    for (let copy of copies) {
      copy.removeAttribute('data-n-p')
      copy.removeAttribute('data-n-href')

      document.head.appendChild(copy)
    }

    const handler = () => {
      Router.events.off('routeChangeComplete', handler)

      window.setTimeout(() => {
        for (let copy of copies) {
          document.head.removeChild(copy)
        }
      }, delay)
    }

    Router.events.on('routeChangeComplete', handler)
  })
}

Use the resolveTransitionIssue function with a parameter indicating how long you want the css/scss.module (in ms) to last before removal (e.g., duration of page transitions).

resolveTransitionIssue(1000)

This code is sourced, so apologies if it doesn't suit your requirements.

Answer 2

Fix Module: import this to your main component

import Router from 'next/router'

export const resolveTransitionIssue = (delay: number): void => {
  Router.events.on('beforeHistoryChange', () => {
    const nodes = document.querySelectorAll('link[rel=stylesheet], style:not([media=x])')
    const copies = [...nodes].map((el) => el.cloneNode(true) as HTMLElement)

    for (let copy of copies) {
      copy.removeAttribute('data-n-p')
      copy.removeAttribute('data-n-href')

      document.head.appendChild(copy)
    }

    const handler = () => {
      Router.events.off('routeChangeComplete', handler)

      window.setTimeout(() => {
        for (let copy of copies) {
          document.head.removeChild(copy)
        }
      }, delay)
    }

    Router.events.on('routeChangeComplete', handler)
  })
}

Use the resolveTransitionIssue function with a parameter indicating how long you want the css/scss.module (in ms) to last before removal (e.g., duration of page transitions).

resolveTransitionIssue(1000)

This code is sourced, so apologies if it doesn't suit your requirements.

Answer 3

Answer №2

Encountered a similar issue that was also discussed on GitHub. To resolve it (luckily, my project is small), I deleted all files [name].module.css and transferred the styles to a global stylesheet

Answer 4

Encountered a similar issue that was also discussed on GitHub. To resolve it (luckily, my project is small), I deleted all files [name].module.css and transferred the styles to a global stylesheet

Answer 5

Answer №3

Opt for inline CSS rather than opting for CSS Modules.

Answer 6

Opt for inline CSS rather than opting for CSS Modules.

The CSS module is disappearing before the Framer Motion exit animation finishes when the path changes

Answer №1

Answer №2

Answer №3

Similar questions

Position a div element on top of Google Maps to create a floating

Show an error notification if the mobile device does not meet the requirements for jquery mobile version

Combining Django Bootstrap input-group-addon with Model Form for seamless field integration

We encountered a sudden termination of JSON data while parsing near '...w2BfLygJAO9ZBvYIqZTld'

Browsing through dual snap points simultaneously on Google Chrome

The popup is unable to remain in the center of the screen because the background page keeps scrolling back to the top

The CSS transition duration is not being applied properly on the initial transition effect

Guide to incorporating checkboxes and onChange events in React applications

Using the $.get() method within a loop of .each(), retrieve the specific $(this) value within the $.get function

Apologies, we are experiencing a server error. TypeError: Unable to access the 'map' property of an undefined

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

What is the best way to create a stylish outward curve effect for an active sidebar item using just CSS

Utilizing NextJS and localstorage: Best practices for seamless integration

New to CSS/Ruby - What causes two adjacent buttons to have varying sizes?

Combining multiple dictionaries into one single dictionary array using JavaScript

Converting a DataFrame to a JSON series using Python

How can I implement the `withAuth` design using `iron-session` in Next.js?

Is Next.js API considered a back-end technology?

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

Remove the underline from a link in Next.js