ppistecky

I'm trying to use ScrollSmoother with an element with a fixed background-attachement. Without the ScrollSmoother it works fine...

That seems to have fixed it. thanks a lot!

I have a problem when using scrolltrigger with nextjs 14 on my local machine when running npm run dev. On the production site it works, but I can't develop like this. I have a very basic example. Just when you create a next app with npx create-next-app@latestand this as page.tsx: 'use client'; import Image from 'next/image'; import { useLayoutEffect, useRef } from 'react'; import gsap from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; export default function Home() { const backgroundImage = useRef(null); const foregroundImage = useRef(null); useLayoutEffect(() => { // get the height of the backgroundImage dom element console.log(backgroundImage.current.clientHeight); console.log(foregroundImage.current.clientHeight); gsap.registerPlugin(ScrollTrigger); const timeline = gsap.timeline({ scrollTrigger: { trigger: document.documentElement, start: 'top', end: '+=500px', scrub: true, }, }); timeline .from(backgroundImage.current, {clipPath: "inset(15%)"}); }, []); return ( <main> <div> <div ref={backgroundImage}> <img src="/images/image.jpg" alt="xx" /> </div> </div> <div ref={foregroundImage} className="h-[2000px]"> hello </div> </main> ); } on production (Vercel) this results in: https://www.dropbox.com/scl/fi/1n1j9yqoz4uh2iln10uod/production.mov?rlkey=kkpe84c6259d6k4trqml3dq4q&dl=0 But on local dev: https://www.dropbox.com/scl/fi/gljyff9ub7bmf6j96iym2/dev.mov?rlkey=8s9ec8ga1zz7mycogv2awrg9c&dl=0