onScroll section stack and fill color then section release.

[Moktubat]

I need to create a scroll-triggered animation where the section sticks, features activate sequentially, and then releases.

before scroll-triggered:

after scroll-triggered:

Link: https://codesandbox.io/p/devbox/8zwqsw

[Rodrigo]

Hi @Moktubat and welcome to the GSAP Forums!

 

In your demo the styles are completely off:

Perhaps these demos can help you getting started:

See the Pen wvZqwyg by GreenSock (@GreenSock) on CodePen.

 

See the Pen pomvabo by GreenSock (@GreenSock) on CodePen.

 

I know that these demos are not exactly what you're looking for, but the idea is the concept behind them, how to setup something using a single Timeline that then is scrubbed using ScrollTrigger.

 

Hopefully this helps

Happy Tweening!

 

 

[Moktubat]

https://codesandbox.io/p/devbox/8zwqsw

I tried my best but can't.

[Rodrigo]

Hi,

 

I would strongly recommend you to learn about CSS Grid and/or Flexbox in order to be able to create the layout you're looking for. The GSAP part of this might be the simplest one, but getting the layout right is critical:

https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout

 

Also these videos can help as well:

 

 

Probably there are hundred of more free videos in youtube and other articles and free tutorials on the subject in the web.

 

Good luck with your project! 👍

Happy Tweening!