Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Dipit Maurya

Update text, on the basis of scrollable children div.

Recommended Posts

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 ?

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×