Jump to content
Search Community

Split Text Classes

Team test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.

 

See the Pen XGXBvV?editors=0010 by anon (@anon) on CodePen

 

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.

See the Pen XGXBvV?editors=0010 by anon (@anon) on CodePen

Link to comment
Share on other sites

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?

 

You can animate alternating lines with different values using the cycle property in a staggerTo/staggerFrom.

 

Below is a simplified example showing that some lines go left and others go right, but they all use the same class.

 

See the Pen GeoGdy?editors=1010 by GreenSock (@GreenSock) on CodePen

 

you can read more about cycle here: https://greensock.com/cycle

 

Although that example uses SplitText it isn't required for these types of effects, you can do the same thing on a bunch of divs that you create.

 

 

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

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.

See the Pen vPGGLK?editors=0010 by anon (@anon) on CodePen

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

If I understand your desired outcome correctly, I think you'll need to loop through each of the .text elements inside each .container. I made a simplified fork of your pen to point you in the right direction.

 

See the Pen drOdrx by PointC (@PointC) on CodePen

 

This is quite similar to these other threads about staggering groups of elements at the same time. I think they'll be helpful for you to read.

Hopefully that helps. Happy tweening.

:)

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Yep, right on @PointC.  ?

 

I was already in the process of creating this fork when @PointC replied: 

 

 

I simplified a bunch of stuff too, so hopefully it's pretty clear but let me know if you have questions. Is that basically what you were after? 

 

Happy tweening! And thanks for being a Club GreenSock member. 

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

@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!

Link to comment
Share on other sites

1 hour ago, Team said:

Only thing I don't fully understand is how this line of code works:


activeIndex = (activeIndex + 1) % containers.length;

 

 

All that does is add one to activeIndex, but once it exceeds the length of containers, it wraps back to 0. So, for example, if containers.length is 4 and activeIndex is 3 and then we add 1, that means 4 % 4 which is 0. So basically it just goes back to index 0 at that point. Otherwise, you'd end up with activeIndex being MORE than the number of elements in containers which would be bad :)

 

Make sense? 

 

4 % 4 = 0

5 % 4 = 1

6 % 4 = 2

...etc.

  • Like 2
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.
×
×
  • Create New...