ScrollTrigger Change parameters for multiple items

[Lkey 0 Likes (Newbie)]

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

 

 

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

 

 

See the Pen xxLbZQg by Lkey (@Lkey) on CodePen

[OSUblake 18,475 Likes (Superhero)]

Hi @Lkey

 

Have you tried creating animations for each section, kind of like this?

 

gsap.to("body", {
  backgroundColor: colorSection.dataset.bgcolor,
  color: colorSection.dataset.textcolor,
  scrollTrigger: {
    trigger: colorSection,
    scroller: ".lk-wrapper",
    start: "top 50%",
  }
})

 

[Lkey 0 Likes (Newbie)]

16 hours ago, OSUblake said:

Привет @Lkey

 

Вы пробовали создавать анимации для каждого раздела, вроде этого?

 

gsap.Для("тело", {Цвет фона: цветовая гамма.набор данных.цвет bg,Цвет: Цветовая гамма.набор данных.цвет текста,Устройство для прокрутки: {спусковой крючок: Цветовая гамма,скроллер: ".lk-обертка",  начало: "лучшие 50%",
  }
})

 

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.

 

See the Pen NWvPyrQ by Lkey (@Lkey) on CodePen

 

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 ))

[OSUblake 18,475 Likes (Superhero)]

Hmmm... in that case it might be better to use onToggle kind of like this. Or maybe just onEnter.

 

See the Pen jOLEevq by GreenSock (@GreenSock) on CodePen

 

[Lkey 0 Likes (Newbie)]

3 hours ago, OSUblake said:

Hmmm... in that case it might be better to use onToggle kind of like this. Or maybe just onEnter.

 

 

 

 

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:

See the Pen NWvPyrQ by Lkey (@Lkey) on CodePen

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 )

[OSUblake 18,475 Likes (Superhero)]

Your GSAP animations are using the CSSPlugin. That's what allows you to animate CSS properties like the background color. Are you trying hover items that are being animated with your current code, like the circle, square and triangle?