Jump to content
Search Community

Pinned element not pinning to top of pin spacer

Lb1594 test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

I am new to gsap so I apologise in advance if I am missing something obvious.

I've created a sandbox of the issue im having where the element I am trying to pin is not pinning to the top of the viewport when scrolling down the page, the link is here: https://codesandbox.io/s/rough-moon-x34wgz?file=/src/App.js . 

 

Any help or advice would be massively appreciated!

Link to comment
Share on other sites

  • Solution

Hi @Lb1594 and welcome to the GreenSock forums!

 

You are officially another victim of the double call in React's effect hooks (useEffect and useLayoutEffect) as explained here:

 

When using React GSAP Context is your best friend:

https://greensock.com/docs/v3/GSAP/gsap.context()

 

Basically you have to create your ScrollTrigger inside a Context instance:

useEffect(() => {
  const ctx = gsap.context(() => {
    gsap.to(elementRef.current, {
      scrollTrigger: {
        trigger: elementRef.current,
        start: "top top",
        end: "+=200vh",
        pin: true,
        pinSpacing: false,
        markers: true,
      }
    });
  });
  return () => ctx.revert();
}, []);

Finally I'd recommend you to check the resources in this page:

 

Hopefully this helps.

Happy Tweening!

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...