Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Cristian Samaniego

Controlling two different events with same scrolltrigger and timeline

Recommended Posts

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

Link to comment
Share on other sites


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

  • Like 6
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.