[Trying to create a similar animation]

I was trying to create something similar to: https://www.theclimatepledge.com/us/en/progress

Which I believe does use GSAP and Scrolltrigger as I was inspecting their scripts, I initially thought it was also using with threejs since elements seem to be coming towards the camera and disappearing.

Since I am kind of new to GSAP and threejs, I was not be able to make something similar with Next.js and wanted to know if I were correct on using threejs. Would love any advice on how to create something similar or if there are any examples with GSAP and threejs.

[NextJS ScrollTrigger going to ending when starting]

Thanks a lot it seems you guys were correct, I added an additional non flex HTML element and using GSAP context solved the issue also added the missing styles.

Link: https://codesandbox.io/p/sandbox/cool-gwen-gqvoqi

 

Appreciate the quick and helpful responses!

[NextJS ScrollTrigger going to ending when starting]

Hi 
 

I was following the example below but when trying to implement on a nextjs project the animation on start is disappearing (going to the end of the animation) also it seems to be duplication i have no clue why, if anybody can enlighten me I would greatly appreciate it. When going from bottom to top animation works correctly.

Code sandbox link: https://codesandbox.io/p/sandbox/cool-gwen-gqvoqi
 

Example I followed:

See the Pen LYpaPQp by hexagoncircle (@hexagoncircle) on CodePen