ScrollTrigger animation on list of item

[Maël]

Hello folks,

I'm pretty new to gsap, I've only fooled around with gsap.to() and other basic features.

Today I want to create an effect that change the opacity of the object in the middle of screen.

 

It works pretty well on scrolling down, but when I scroll up, it doesn't animate the same way. (The opacity start changing when the scrollTrigger detect the "start" condition)

I understand it is the normal behavior for the code I wrote, but I can't find a solution to make it works both scroll down and scroll up

My dom :

<div className="list">
  <p className="item item1">Growth</p>
  <p className="item item2">Advocacy</p>
  <p className="item item3">Trends</p>
  <p className="item item4">Instagram</p>
</div>

And my code :

document.querySelectorAll(".item").forEach((item) => {
  gsap.to(item, {
    scrollTrigger: {
      trigger: item,
      start: "top center",
      end: "20% center",
      scrub: true
    },
    duration: 0.4,
    opacity: 1
  })
  gsap.to(item, {
    scrollTrigger: {
      trigger: item,
      start: "80% center",
      end: "bottom center",
      scrub: true
    },
    duration: 0.4,
    opacity: 0.4
  })
})

Thanks for the help !

Happy coding !

Maël

See the Pen eYdYdwm by atzmael (@atzmael) on CodePen

[akapowl]

 

Hey @Maël - welcome to the forums.

 

I'm a bit in a hurry, so I can not explain in detail, what's wrong, but you can find clues about what could be going wrong in this article

 

 

 

Changing your tweens to fromTo()-tweens instead of .to()-tweens and setting immediateRender: false to them was the way to go for me here.

 

See the Pen 7a531483fdf03ee7275ddc25f73c45a2 by akapowl (@akapowl) on CodePen

 

So you were pretty close yourself. Good job.

 

Hope this helps.

 

Cheers,

Paul

 

 

[Maël]

Oh thanks, that works pretty well.

I've red the article; it says, to avoid the behavior, "you have to use fromTo or immediateRender or a timeline" but I notice that you're using fromTo + immediateRender, what is the reason ?

 

Thanks again,

Maël

[akapowl]

 

As mentioned, I was a bit in a hurry before, thus I just hammered everything in there, that could be a possible fix.

Setting immediateRender: false alone on your .to() tweens seems to be sufficient, though.

 

See the Pen d3b0eebfbd13841983a0d30976049628 by akapowl (@akapowl) on CodePen

 

The using of .fromTo()-tweens actually is a 'fix' for when using .from()-tweens (if I am not mistaken), and it  alone actually doesn't really help in your case.

 

Sorry for any confusion.

 

[Maël]

Alright, thanks for the explanation !

I'm not confused at all, but I was curious about it.