Next JS integration | Scroll on reveal ? #10
Description
I'm trying to use this library in my next-js project but i can't managed to work, i include the script in the way next recommend
const RootLayout = ({
children,
}: Readonly<{
children: React.ReactNode
}>) => {
return (
<html lang="en" suppressHydrationWarning>
<body className="font-body text-muted antialiased">
<div className="flex flex-col min-h-screen">
<Navbar />
<main className="flex-grow">{children}</main>
<Footer />
</div>
</body>
<Script src="https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js" />
</html>
)
}
And the component is
<div className="bg-background rounded-3xl p-8 lg:p-12 relative shadow-2xl fadeIn" data-trig>
...
</div>
And my css is
.fadeIn{
opacity:0;
}
.fadeIn.trig{
animation: fadeIn 1s normal forwards ease-in-out;
}
@keyframes fadeIn {
0% {
opacity:0;
}
100% {
opacity:1;
}
}
I don't know what i am missing. i would appreciate any help. Thanks in advance