Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
iuscare

staggerTo speeding up curve between the stagger objects

Recommended Posts

Hi there,

 

I am testing the splitText plugin on codepen before purchasing a membership. I`ve created an array with my text fragments and injected them with createDocumentFragment. I`ve then created a timeline within my for loop. This works well for animating my objects with staggerTo/staggerFrom.

 

But I seem unable to find out two things:

(1) How can I implement some kind of stagger "curve", instead of a straight line graph between the objects? I`ve already tried it with the customEase plugin and getRatio property but with no success. The animation between the stagger objects should start slow and should speed up over time.

 

(2) The last item of the stagger Timeline should remain. I am looping the timeline on codepen so you can get a better sense. But on production side the timeline should only play once and the last item (This text should stay) should remain.

 

(3) Does this way of implementation weigh heavy regarding performance, especially when I end up adding even more words to my array (e.g. 23-26)? Are there any things, I could improve?

 

Would be great if I can some tips from you awesome guys! 

 

Have a good day!
Pascal

See the Pen QXQKEW by iuscare (@iuscare) on CodePen

Link to post
Share on other sites

There are a bunch of ways you could do this, and I'm not quite sure which effect you're after but here's a fork that might be close: 

See the Pen 321d558bd58fe43f7083a29aab813bb2 by GreenSock (@GreenSock) on CodePen

 

Basically, you can just create your animations linearly, but then actually tween the playhead of the main timeline in a way that has an ease! 

 

If, on the other hand, you actually want to keep the fading durations consistent (so each one fades at exactly the same rate, but you're only accelerating the duration of the text staying opaque), that's a whole different beast (more complex, but doable). Just let us know exactly what effect you're going for and we'll see what we can do. 

 

If you're merely looking to accelerate the staggers themselves, you'll love the new advanced staggering feature that was added in GSAP 2.1. Read about it here: 

See the Pen jdawKx by GreenSock (@GreenSock) on CodePen

 

I hope to see your name on the membership roster soon ;)

  • Like 4
Link to post
Share on other sites

Hey Jack,

 

thank you so much for coming back to me. Your provided example is very close and I can already work with it. But you are right with your second thought you`ve thrown in: I am looking more into a way to keep the fading animations consistent and to accelerate the duration of the text staying opaque. Sorry, if I did not explain it good enough.

 

May you give me some some hints or a working example (which would be suuuper awesome), where I can see what's going on to solve this, too? You'll find our NGO in your greensock membership soon ;-)

 

Kind Regards

Pascal

Link to post
Share on other sites

Hi @iuscare,

 

Maybe this will help here:

 

See the Pen KjQojO by mikeK (@mikeK) on CodePen

 

Another option for creative staggering:

 

 

Happy tweening ...

Mikel

 

  • Like 2
Link to post
Share on other sites

Hi @mikel & @GreenSock,

 

spent another evening digging in and I think I am almost there. So far, many thanks for the help I`ve found in this forum. While other forums like stackoverflow unfairly stamps questions as stupid very fast, it seems, like everyone in this community is always polite and keen. 

 

I tried to get my head around my issue and I think it does not make much sense to keep the fading rate of the staggered items themselves consistence. If every item would have a fading rate of just 0.1ms, the speed between the staggering items has to be very fast. Basically I try to build something like a list, which lists all departments and offers of our NGO. Since this list is big (>25 array elements) and part of an intro animation (built with gsap aswell btw ;-)) , this animation should not take too long. 

 

So I am fine with Jacks first suggestion. If you have another opinion about my idea and best practice, just let me know. I have just one last struggle: My last array element is not a single word, it has multiple words. SplitText splits up every word into a single one, wraps its class around it and animates every word of it alone, which absolutely makes sense. Anyway, is there an easy way, to animate the whole array element at the end of the animation and not just every word of it?

 

I`ve updated my example a little bit, maybe the solution is easy and fast implemented on it:

See the Pen QXQKEW by iuscare (@iuscare) on CodePen

 

All the best

Pascal!

 

 

  • Like 2
Link to post
Share on other sites
45 minutes ago, iuscare said:

So far, many thanks for the help I`ve found in this forum. While other forums like stackoverflow unfairly stamps questions as stupid very fast, it seems, like everyone in this community is always polite and keen. 

 

I love that you noticed. It's a very meaningful distinction that we work hard for around here :)

 

51 minutes ago, iuscare said:

I tried to get my head around my issue and I think it does not make much sense to keep the fading rate of the staggered items themselves consistence.

 

I agree. I think that'd look weird. Sometimes things sound good in our head but then when we actually see it, it's like "oh, yeah, that's not what I want."

 

57 minutes ago, iuscare said:

is there an easy way, to animate the whole array element at the end of the animation and not just every word of it?

 

I'm curious why you're even using SplitText at all. That last chunk is the only multi-word one, and you don't even want to animate them accordingly, so maybe you can just dump that altogether and simply do from/to tweens instead of staggerFrom/staggerTo ones, like: 

 

See the Pen b096727c2f2ada17fb9c9ec38526bc6d by GreenSock (@GreenSock) on CodePen

 

Also, here's a little demo we did a long time ago that even adjusts the duration of each animation based on the length of the words (so people have enough time to read them, and the pacing is what it needs to be in terms of readability): 

 

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

 

Happy tweening!

  • Like 3
Link to post
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.

×