Controlling two different events with same scrolltrigger and timeline

[Cristian Samaniego]

Hello! Im making a website with a section that has to pin on scroll and while scrolling different sized circles will be appearing, I got that working right on the website but Im having trouble trying to update text every time a new circle appears. What I thought would be a good solution was using the onComplete callback for each circle to write a function that updates the text but the callbacks are triggered a little while later when the next circle is already visible and I think will be confusing for the users. So I was wondering if there was a way to use the same trigger for two different lists, one with the circles and another one with different texts and update the same element just changing the text, I think doing it that way, if possible, could also add the ability to animate the text also, but I havent been able to achieve it yet. also the container is not pinning in the demo although its working on my website with the same code (also I added the blank circle div so the third circle could last a little while more in the view). 

See the Pen XWRKgdM by chrisrubiano (@chrisrubiano) on CodePen

[akapowl]

 

Welcome to the forum, Cristian!

 

1 hour ago, Cristian Samaniego said:

also the container is not pinning in the demo

 

Maybe you want to pin the whole section instead of the container?

 

On the text-changing:

Since you are making use of a timeline for the circles here anyway, you could just add tweens for the text and position them on the timeline making use of the position parameter. Maybe something like this (note: this doesn't actually animate; it just exchanges the text in this demo)

 

See the Pen 441b68fc0191c534a9a0109015b18cf8 by akapowl (@akapowl) on CodePen

[Cristian Samaniego]

Thank you so much! that position parameter is exactly what I needed to sync them