How do I make different objects animate differently on a scrollTrigger?

[IbraheemHaseeb]

I am making a little scrub animation where when I scroll down image zooms in using the scale property and when I am zooming in I want some text to change its opacity from 0 to 1 to make it appear. And when I scroll further down I want that thing to fade out by changing the opacity to 0 again. Can anyone help me? My problem is that I don't know how to make different things animate on a scroll trigger.

 

So far here I am. Obviously you cant see the result because there is

 

Thank you for your time.

See the Pen wvgQBdx?editors=0010 by ibraheemhaseeb7 (@ibraheemhaseeb7) on CodePen

[GreenSock]

Have you poked around the demos section? Perhaps you can find some inspiration there. 

 

Here's what I imagine you were looking for, or at least it'll serve as a jumping-off point: 

See the Pen GRrwQRB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Here's a different concept (probably not what you're looking for, but I figured I'd drop it in here anyway):

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

 

Happy tweening!

[akapowl]

 

Yeah, it's pretty hard to help you here, because your demo doesn't even have text in it.

So there's no way we could know, how to do what when, to help you here.

 

Maybe this modified pen of yours here can serve as inspiration, too.

 

Happy scrolling.

 

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

 

 

Another thing, I just noticed (that I missed the last time around) is that you put ScrollTriggers on individual tweens of a timeline.

You'd probably want to avoid that, as the article for the most common ScrollTrigger-mistakes states.