[ScrollSmoother with background-attachment: fixed]

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

 

 

See the Pen bGJxmOq by ppistecky (@ppistecky) on CodePen

[GSAP Scrolltrigger + NEXTJS 14 irratic behavior in dev mode]

That seems to have fixed it. thanks a lot!

[GSAP Scrolltrigger + NEXTJS 14 irratic behavior in dev mode]

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