Hello everyone! I've been racking my brain trying to think of The Right Way™ to do this.
In the codepen demo I've been working on, I've worked out how to have an inital timeline, which then moves to the main timeline. The total duration of the timeline is linked to the total pageHeight, and progress is tied to the scroll event. The main timeline currently repeats infinitely as this needs to continue to animate for an unspecificed amount of time (This could vary depending on the page's total s
Hey Andrew.
Addressing your question, it might be better to determine how many repeats are necessary for the given height. That way you can have a different animation at the end of the timeline without too much issue. Otherwise it's going to be hard to deal with jumps from whatever state it's in when the last animation starts.
As an aside, your code could likely benefit from being more DRY (don't repeat yourself). It looks like you tried to use GSAP 3's default behavior