Animation Position Issue with Sticky Container on Tab Change

Question

Animation Position Issue with Sticky Container on Tab Change

MotaZor94 opened this issue 4 months ago · comments

We're encountering a problem in our Next.js application where the position of animations within a sticky container becomes misaligned whenever the browser tab is changed.

This happens only on the elements within a sticky container, the rest is working fine!

Please have a look at the Loom recording below:

https://www.loom.com/share/d7dbc26b0a794a2eb7be6fa79f202444?sid=4ee4d574-f174-4e8a-bf3a-bbcd6b9dc364

Basic example:

export default function FullCircle() {
  return (
    <section className="news-section section-news">
      <div className="section-news__inner">
        <header className="news__header">
          <div className="news__header-curved-text"></div>
          <div className="circle-wrapper smaller news__header-decoration">
            <div className="circle"></div>
          </div>
          <div className="news__description a1 anim-text">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
          </div>
        </header>
        <div className="news__cards">
          <div className="news__cards-container">
            <Parallax translateX={[50, 10]} className="card-wrapper">
              <Card img={Skoljkica} price={FestivalPackages[0].price} pass={FestivalPackages[0].name} text={FestivalPackages[0].description} markdown={FestivalPackages[0].markdown} />
            </Parallax>
          </div>
        </div>
      </div>
    </section>
  );
}

We have a root layout defined:

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className="bg-[#FCF8EF]">
        <Providers>{children}</Providers>
        {/* <Footer /> */}
      </body>
    </html>
  );
}

and the parallax provider:

"use client";

import { ParallaxProvider } from "react-scroll-parallax";

export function Providers({ children }: { children: React.ReactNode }) {
  console.log("Providers");
  return <ParallaxProvider>{children}</ParallaxProvider>;
}

We are running Next 14 with App router and react 18.2.0

J Scott Smith · Answer 1 · Sat Mar 16 2024 12:50:56 GMT+0800 (China Standard Time)

Ya, unfortunately this wasn't built to support sticky elements. Because those elements stop scrolling at certain points the cached values can change depending on when they are updated. Window focus is one event that updates the cached values. The shift is due to the new position when becoming stuck.

You may be able to work around it by using a targetElement, which would reference an element that is not sticky. Or you can use predefined startScroll | endScroll values instead. Could be tricky depending on your design needs, but this would avoid the sticky issue.

I'll update the docs to clarify this lack of support for sticky.