Framer motion layout animation fails to account for page scrolling during transitions in NextJs routes

Question

Framer motion layout animation fails to account for page scrolling during transitions in NextJs routes

Currently, I am working on a fascinating NextJS project that showcases a series of interactive blocks. As the user navigates through the app, these blocks dynamically adjust their size and position on the screen.

To achieve this effect, I'm leveraging the power of framer-motion's layout feature. Everything works seamlessly except for one scenario: when users have scrolled down the page, it seems like framer-motion disregards the scroll position and animates the blocks from their original top-of-page location.

If you're curious to see this behavior in action, check out this interactive demo on codesandbox:

Try selecting the first block without scrolling - notice how it animates flawlessly.
Now, scroll all the way down and select the last block. You'll observe that instead of animating from its current viewport position, the block appears to animate from beneath the screen.

Is there a workaround to account for the scroll distance so that the animations are tied to the viewport's coordinates rather than the page's top? Your insight would be greatly appreciated!

For visual reference, take a look at this example:

javascript next.js framer-motion nextjs-dynamic-routing

Answer 1

Answer №1

It seems like the issue arises from changing routes, resulting in a smaller viewport for the new route. Although not ideal, one potential solution could involve saving the body height of the card list page and using it as the minimum height for the card detail page. This height adjustment can be removed once the layout animation is complete:

To implement this, begin by encapsulating the <Link> component within a custom wrapper called <CardRedirector>:

          <CardRedirector>
            <Link href={`/${card.id}`} scroll={false}>
              <p>{card.title}</p>
              <Block id={card.id} />
            </Link>
          </CardRedirector>

Within the <CardRedirector>, incorporate the use client hook to establish a click listener that saves the current body height as the minimum body height when the link is clicked:

"use client";

export const CardRedirector = ({ children }) => {
  const onCardClick = () => {
    const currentBodyHeight = document.body.scrollHeight;
    document.body.style.minHeight = `${currentBodyHeight}px`;
  };

  return <button onClick={onCardClick} style={{
    background: 'none',
    color: 'inherit',
    border: 'none',
    padding: '0',
    font: 'inherit',
    cursor: 'pointer',
    outline: 'inherit',
  }}>{children}</button>;
};

export default CardRedirector;

Next, on the card detail page, wrap the <Block> component with <BlockContainer> to leverage the use client hook and attach an event listener onLayoutAnimationComplete to remove the min-height property upon completion of the animation:

"use client";

import Block from "./block";

export const BlockContainer = ({ id }) => (
  <Block
    id={id}
    fixed="true"
    onLayoutAnimationComplete={() => {
      document.body.style.minHeight = "0";
    }}
  />
);

export default BlockContainer;

Finally, update the card detail page code as follows:

export const BlogPostPage = async ({ params }) => {
  const id = Number(params.slug);

  if (!id) return notFound();

  return (
    <>
      <BlockContainer id={id} />
      <Link href="/" scroll={false}>
        Back
      </Link>
    </>
  );
};

For the modified sandbox version, visit the following link:

https://codesandbox.io/p/devbox/next-js-with-framer-motion-example-forked-m7d5ss?layout=.......

Answer 2

It seems like the issue arises from changing routes, resulting in a smaller viewport for the new route. Although not ideal, one potential solution could involve saving the body height of the card list page and using it as the minimum height for the card detail page. This height adjustment can be removed once the layout animation is complete:

To implement this, begin by encapsulating the <Link> component within a custom wrapper called <CardRedirector>:

          <CardRedirector>
            <Link href={`/${card.id}`} scroll={false}>
              <p>{card.title}</p>
              <Block id={card.id} />
            </Link>
          </CardRedirector>

Within the <CardRedirector>, incorporate the use client hook to establish a click listener that saves the current body height as the minimum body height when the link is clicked:

"use client";

export const CardRedirector = ({ children }) => {
  const onCardClick = () => {
    const currentBodyHeight = document.body.scrollHeight;
    document.body.style.minHeight = `${currentBodyHeight}px`;
  };

  return <button onClick={onCardClick} style={{
    background: 'none',
    color: 'inherit',
    border: 'none',
    padding: '0',
    font: 'inherit',
    cursor: 'pointer',
    outline: 'inherit',
  }}>{children}</button>;
};

export default CardRedirector;

Next, on the card detail page, wrap the <Block> component with <BlockContainer> to leverage the use client hook and attach an event listener onLayoutAnimationComplete to remove the min-height property upon completion of the animation:

"use client";

import Block from "./block";

export const BlockContainer = ({ id }) => (
  <Block
    id={id}
    fixed="true"
    onLayoutAnimationComplete={() => {
      document.body.style.minHeight = "0";
    }}
  />
);

export default BlockContainer;

Finally, update the card detail page code as follows:

export const BlogPostPage = async ({ params }) => {
  const id = Number(params.slug);

  if (!id) return notFound();

  return (
    <>
      <BlockContainer id={id} />
      <Link href="/" scroll={false}>
        Back
      </Link>
    </>
  );
};

For the modified sandbox version, visit the following link:

https://codesandbox.io/p/devbox/next-js-with-framer-motion-example-forked-m7d5ss?layout=.......

Framer motion layout animation fails to account for page scrolling during transitions in NextJs routes

Answer №1

Similar questions

Tips for adding new items to a Masonry Image List using React MUI

How can we determine if a Node.js application will remain operational?

Selecting a particular item in a list depending on time using JavaScript, jQuery, or Angular

Using jQuery's slideToggle feature to hide content when clicked again or when a different button is

The concept of undefined in JavaScript when an if condition is applied

Customize checkbox and label using jQuery

Issues arising from utilizing Twitter Bootstrap 3.1.x, the box-sizing property, and Revolution Slider

Trying to utilize RegEx for my project, but feeling stuck on how to solve my problem

Is there a way to ensure the content of two divs remains aligned despite changing data within them?

Clicking on text triggers image display

Receive a response in fragments from express on the browser

Increasing and decreasing the display of content using JQuery based on height rather than character count

Having trouble with moving the svg:svg element?

How does SWR affect React state changes and component re-rendering?

Guide to making two text boxes with SimpleDialog in jQuery Mobile

Twice the clicking actions triggered by the event

Troubleshooting Date Errors in Typescript with VueJS

JavaScript API for Outlook appointment object

"Utilize Selenium to navigate and select a menu option with a

The output of server.address() method in Node.js is ::