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

There is no response provided by the function

When sending strings through an ajax call, spaces are getting converted to "'+'"

Extract several "documents" from one compilation

"Utilize AJAX to submit the value of the text box input from a jQuery slider when the Submit Button

Creating a Basic jQuery AJAX call

Executing Ajax requests to interact with a RESTful API

Discovering the value of an object through its prototypes

What is the best way to require users to click one of the toggle buttons in a form?

testing exceptions with Jest: a step-by-step guide

I possess a JSON array object and need to identify and extract the array objects that contain a specific child node

JQuery enables nested sorting functionality

Experiencing a 404 ERROR while attempting to submit an API POST request for a Hubspot form within a Next.js application

Loading identical code in two different div elements

Creating a multi-tiered cascading menu in a web form: Harnessing the power of

Using Tailwind CSS to center a NexJS <Image /> component within a modal

The VueJS component from a third-party source is not located in the node_modules directory

Ways to automatically close the external window upon logging out in Angular 12

Actions cannot be performed on elements generated by ng-repeat

Instructions on how to modify a document's content by its unique identifier using Firebase Modular SDK (V9)

Creating a stylish navigation bar with custom components using Material UI and React