[Pinning a header to the center of the viewport in reactjs]

21 minutes ago, Rodrigo said:

I agree with Jack on this, I think the issue is the way Hot Reloading is working on your particular setup, since you mention a production build works as expected. Unfortunately we can't dig deeper into this type of issues since we don't have the capacities and time to dedicate to them.

 

Happy Tweening!

I believe this is also the issue, going to look into wether or not you can disable this feature in Next.js.

 

Thanks!

[Pinning a header to the center of the viewport in reactjs]

13 hours ago, GreenSock said:

Yeah, that kinda sounds like what I described earlier - a hot reloading issue in your dev workflow where it only partially injects things while you're developing. Totally unrelated to GSAP. Maybe try disabling the hot reloading or do a hard-refresh to see if it's actually working without the hot reloading partial stuff. I'm totally guessing here since no minimal demo was provided that clearly shows the issue. If you've got one of those, we'd be happy to take a peek.

I'd provide a minimal demo, however oddly enough it seems to work fine when running in codepen or code sandbox -- the issue only seems to happen when running yarn dev locally.

[Pinning a header to the center of the viewport in reactjs]

On 12/12/2022 at 4:25 AM, DevNate said:

The pinned element still skips on my local server.

 

I've also noticed GSAP acts a little funky when running next.js in yarn dev. hit or miss sometimes, usually running yarn build && yarn start works fine though.

[GSAP + NEXTJS (REACT): scrolltrigger dissappears / stops working]

Im having issues with gsap and nextjs where scrolltrigger doesnt work as expected when running `yarn dev`, but works fine on `yarn build && yarn start`.

 

Whats weird is that it works fine in this stackblitz example, but the exact same code i have running locally on vscode does not work with `yarn dev`, what i'm seeing is the pinned section stuck on the screen, with the 3rd section overlapping it.

 

https://stackblitz.com/edit/nextjs-em5vru?file=pages/index.js

[Animation Reproduction]

I found this demo useful: 

See the Pen eYZpoXa by flowgrow (@flowgrow) on CodePen

 

Thanks!

[Animation Reproduction]

Hi All,

 

I'm trying to reproduce an animation effect i've found on this website, however I've been unlucky => https://videinfra.com/ (see the section that pins while images mask over each other and content fades on the left on scroll).

 

Is anyone able to point me in the right direction, or provide a link to a forum post that may cover this or something similar?

 

Thanks in advance!