Inserting a timeline after an infinitely repeating timeline

[_andrewireland]

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 scrollHeight).

Ideally I would like to have another timeline play at the very end of the duration which resets the 'FOUNDER' text back to the initially displayed state just before the end of the total duration, but I'm pretty stumped on how I should approach this with GSAP given I don't have a fixed distance to scroll.

Does anyone have any ideas or methods? Is there a better method I should be using rather than repeat -1 in this instance? 

Thank you for any help or suggestions in the right direction!

Andrew

 

See the Pen JjddvRQ by andrew-ireland (@andrew-ireland) on CodePen

[ZachSaucier]

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 but it wasn't working because you included the duration as the second parameter instead of inside of the vars parameter. For defaults to work, it needs to be in the vars parameter  I also recommend including ease: "power1.out" in your defaults so you don't have to have that every time.

 

---

I might approach this situation a little differently. I don't think my way is necessarily better, but it does seem more straightforward (to me at least) and concise.

 

Since you have an animation that has a state that repeats within itself, you could loop through that state (I think that's what you're trying to do with the infinite section that you have?). Knowing that, once you figure out the position where it could repeat, you could have the scroll animation only play that part of the animation as it scrolls. For the intro animation, you could animate the first part of your scroll animation (for ease I didn't match your start animation but you could do something like that as long as you have a section that syncs up to loop). A basic version of my approach is here:

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

 

I use a tween for the repeating animation but you could switch to a timeline so you can have a varied intro instead if you'd like.

 

I didn't add an outro animation but I left a place for you to add it. In my version instead of calculating the number of repeats you just find the scroll position that you need (i.e. N pixels from the bottom) and then, once that point is reached, instead of looping instead do the outro animation. You could even add some logic to sync up the outro start position with the end of your loop but I didn't implement that. 

 

Note that I also shortened your CSS by a bit and made the text relative to the viewport's height. 

[_andrewireland]

Thanks for your help on this Zach, it's really eye opening to see your thoughts on the matter — calculating the repeats how you've shown seems like the way forward.

Overall this is really clear, but I'm struggling to work out how these values are determined/what magic is going on here:
 

wordTl.time(pageYOffset % 67 + 105);

Also, I apologise my initial code wasn't particularly concise — for this animation I was experimenting with the idea of having slightly different timing for each '.text' element, so I needed the flexibility for each element to be animated differently.

Thanks again, you've been super helpful!

[ZachSaucier]

Just now, _andrewireland said:

Overall this is really clear, but I'm struggling to work out how these values are determined/what magic is going on here:
 

wordTl.time(pageYOffset % 67 + 105);

Those values just come from the "times" of the tween/timeline that the where the conditions are (at least approximately) the same so you can jump between them without any visual jumps. I got the values from just eye balling it once I visualized the current time on update