Scrolltrigger sticks item to top of page on page load in next.js app

[Faarda]

Hi Awesome folks,

I'm trying to use scroll-trigger in a website i'm building with next.js, and I have this weird issue where scroll-trigger fixes the item to the top of the window when the page loads.

It's a simple div with no serious styling, just margins.

I'm currently lazy loading the component using next-dynamic, because, obviously gsap would try to use "window" on load.

Here's what my scroll-trigger intialization looks like

```

const tl = gsap.timeline({

scrollTrigger: {

trigger: container.current,

pin: true,

markers: true,

start: 'top top',

pinSpacing: true,

scrub: true,

end: 'bottom top',

snap: {

snapTo: "labels"

},

anticipatePin: 1

},

});

```

Happy to provide extra details and possibly a codepen link if necessary

[Cassie]

Hi there Faarda -

 

It's impossible to tell what's wrong by looking at that snippet I'm afraid.

Could you put together a minimal demo for us?

This article series may be helpful too - especially the advice to use useLayoutEffect

 

[Faarda]

Hi @Cassie, thanks for your reply.

It might be a hassle trying to put up a demo with codepen, because its a next.js app.

But does a codesandbox demo work?

[Cassie]

Yep sure - Any demo will help! - https://codesandbox.io/u/GreenSock

I suggest you give useLayoutEffect a try first though as it's likely that's the issue. ☺️

[Faarda]

I was trying to reproduce the issue on codesandbox and then i found the actual issue.

I had a page loader that sets the display of the main content of the page to hidden, my guess is when the page loads scrolltrigger cannot actually get the position of the section on the page and so it just fixes it to the top of the page.

Thanks for your help.

[Cassie]

Creating a simplified test case is always helpful! Glad you figured it out.