Lkey

I finally reached my goal! 2 days of work )) 2 of your tips )) And I did it. Your option with onToggle works, but when you scroll quickly it breaks. or if you scroll not all the way back and back. At first I had the idea to add and remove classes like gsap.to("body", {className:"+=yellow-bg black-text"}) Eventually after looking through the documentation, I realized that I could use onEnter: () => and onLeaveBack: () => for each section just by substituting reverse values respectively. And it worked just the way I wanted it to! Fast and accurate)) Here is my updated pin: https://codepen.io/Lkey/pen/NWvPyrQ Now I don't know how I can change those color and background-color values via CSS, because they are written inside the element. I saw there is a CSSPlugin...Can it help me do a hover for values for example? Or should I just animate them with gsap? Nevertheless, thank you so much for the trouble )

Hello again! ? Thanks so much for the tip! I tried to do what you suggested. It took me a long time, but it almost did what I wanted. Take a look, I created a simpler pen so as not to get confused. https://codepen.io/Lkey/pen/NWvPyrQ I listen to the black and yellow sections separately, and run gsap.to for the items I want to change. The scroll down works fine. But when I scroll up, the animation doesn't work the way I want it to. Or it doesn't work that way. I tried setting toggleActions: "play none none reverse" but I'm totally confused by the values How can I make it work in both directions? I feel like I'm getting close ))

Hello everybody! I am just getting started with gsap and it is a very cool library! I am trying to change the background and text colors as well as elements in the fixed header and footer using ScrollTrigger and lcomotive. Here on the forum and on Codepen I found good examples of how to change the color of text and background using data-attribute. That's what I did https://codepen.io/Lkey/pen/xxLbZQg But what if I want to change more elements at the time of scrolling? It seems to me that the data-attribute is difficult for this ... Can I make a flow of changes for different elements in the onEnter: () => moment and in the onLeaveBack: () => moment? I also thought to create .darck-theme and .yellow-theme classes and change them at 50% scroll. But how to properly assign or smoothly change them in the moment? Will this work on the first screen? Any advice would be appreciated. thanks