Update text, on the basis of scrollable children div.

[Dipit Maurya 3 Likes (Newbie)]

Hi, 

I want to change the text on the left, on the basis of image we are scrolling on the right side. I am able to scroll the image, but got stuck at text changing issue. 

See the Pen bGrdWKX by konnectdipit (@konnectdipit) on CodePen

[Cassie 5,128 Likes (Superhero)]

The best advice I can give for scrollTrigger is to start by creating a timeline that does what you want it to - then hook that timeline up to scrollTrigger.

It's the right approach for most use cases!

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

[Dipit Maurya 3 Likes (Newbie)]

15 minutes ago, Cassie said:

The best advice I can give for scrollTrigger is to start by creating a timeline that does what you want it to - then hook that timeline up to scrollTrigger.

It's the right approach for most use cases!
 

 

Hi @Cassie, 

Thanks for the quick response, But how to bind different text on the basis of image ?

[Cassie 5,128 Likes (Superhero)]

There's a myriad of different ways you could approach this.

Taking a look at the position parameter would be a good start - then you can make sure the timings line up.
 

If I take the scrolltrigger off you can see this is just a standard animation timeline. You can position your tweens however you like!

If you add classes or ID's to your titles it'll be nice and easy to target them directly and position them at different points in the timeline.

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