Closed
Description
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