Team

@PointC That's exactly what I tried just before making my last post, however, I was setting elements to .line ? Good to know I was on the right path though. Thank you for the other threads that have similar questions and I'm sorry for not finding them before posting. @GreenSock Right on! That's amazing, thanks so much! Only thing I don't fully understand is how this line of code works: activeIndex = (activeIndex + 1) % containers.length; Cheers guys you're the best!

Hey guys so I gave it a shot with cycle as well, however, it's not running the animation simultaneously for each column. I tried looping over each .line + i for index and running the animation but that way I run the animation at the same time for each line so there is no delay and the columns which have more lines than others don't run the animation properly on the last line. This is what I have right now: https://codepen.io/anon/pen/oVYemd And this is what I'm trying to achieve: https://streamable.com/5qvvs Any help would be appreciated.

Ah, that is pretty neat. I never saw it before, thank you. StaggerTo is the exact effect I'm looking for but can't figure out how I can run it on all lines in activeIndex and nextIndex from my demo simultaneously as to achieve the effect from the linked videos. Edit: Ah I had no idea that the class++ sets .line1 class to each container I split that's awesome so I just set the stagger tweens to each line as I don't expect more than 5-10 lines anyways and on click it runs all tweens at the same time and I can set a delay to whichever I like. I'd still like to know if there's a good way to DRY this up though since I wouldn't like to repeat the code for say 15 lines. Here's the edited pen.

Hello guys, I'm the new kid on the block. So here's an of example of what I'm trying to achieve. Basically each row of lines should fade out/in a few seconds earlier/slower than the other one. https://streamable.com/rvp7r https://streamable.com/lxiup This is the reduced sample. I wonder if there's a way to set different classes on different lines or if there is a better way to achieve this effect? Maybe hard-coding the divs with different classes instead of using SplitText would be the way to go here? But that's not an option I'd like to take because on different screen widths the breaks will be different I'm using <br/>'s only to showcase an example.

Hello guys! Blake this is amazing, thanks so much for sharing it with the community. I have a quick question... I'm using the exact same code you've shared for the page smooth scroll and scroll magic for triggers. I was wondering why the "start" and "end" triggers move so much up and down as if they're glitchy and if there is a way to fix that?