Jump to content
Search Community

Splittext within timeline

Shakespeare 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

Hi. I am new to GSAP and before getting into my query let me first congratulate you guys for such an amazing library and well written documentation! Despite this, I am having some difficulties whenever I try to restart a timeline containing a Splittext tween as seeing in the codepen url. On the first pass (play button), Splittext splits the text as expected and proceeds with he rest of the animation without a problem. During the replay, the text is already under the format required (i.e. chars, words, or lines) but is not being displayed, which I believe relates to the setting of the properties of "text2__hidden" class, and animated. I have tried multiple iterations of the code to no avail.  I even attempted resetting the position of the elements manually (as I successfully achieved with a svgMorph tween within the same timeline -not shown on the codependency extract) and quickly discovered how complex this would be given the characteristics of that particular tween (several parameters being animated and some of these include cycles). What am I missing?

Thanks, 

See the Pen OKbWLd by opeeff (@opeeff) on CodePen

Link to comment
Share on other sites

Hi @Shakespeare,

 

Welcome to the forum and thanks for joining Club GreenSock.

 

I'm not quite following the desired result here. You have one button starting the timeline again with play(0) and you're reverting the split while the other has a restart() only. What is the overall goal here? Just to restart the timeline? Do you need to revert the split for some reason before you restart()? More details would be helpful.

 

Thanks and happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

Hi @PointC,

thank you for your prompt feedback. What I provided is only a small portion of a much larger animation. Basically, I am trying to develop an animation that spreads across multiple webpages. So that, the animation on one page is only a "snapshot" of the entire animation. The restart() portion is supposed to restart the animation (time 0, which is much further back than what you see on this few lines of code I provided) whilst the play() portion is supposed to play the animation from a given point in time onwards (the starting position, or page, is passed as an argument). The conditional clause at the end of the code controls such behavior (or at least that is whay I am intending to do :-) !). The problem is that I am not finding a way to reset the animation (on the SplitText tween) to the initial state so that the behavior at the restart is the same than the one at a "normal" start. Please let me know if this provides sufficient clarity on what I am trying to achieve.

Thanks again,

Link to comment
Share on other sites

I must have weekend brain or something as I'm still not understanding everything about this. 

 

If you want to play() from a certain point, I think you'd benefit from adding labels to the timeline and then you can do something like this:

 

tl.play("yourLabel");

 

More info about play();

https://greensock.com/docs/TimelineMax/play()

 

More info about labels and the position parameter.

https://greensock.com/position-parameter

 

Hopefully that helps point you in the right direction. Happy tweening.

  • Like 2
Link to comment
Share on other sites

hey @Shakespeare,

 

I agree with @PointC: it is not easy to understand what you are up to.
If you want to combine and play different animation sections, the recommendation of @PointC   .play ('label')   is a great option.

 

The splitText tween would run - here an extract.

 

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

 

Happy tweening ...

Mikel

 

 

  • Like 3
Link to comment
Share on other sites

Hi @mikel and @PointC,

I appologize for the confussion and believe will have to do a better job explaining myself on the future queries :-)! The problem I was having related to restarting the animation after the SplitText had run once and not with playing the animation from a specific point forward. Thanksfully, I found a solution which was not as difficult as I once thought. Below is the rational for my solution.

1.- Whenever SplitText is applied, the text provided is converted into lines, words, and/or chars.

2.- The resulting elements are then animated according to the values provided by the tween.

3.- As a result, the position of each element (i.e. matrix3d) is altered and any subsequent animation (or restart) on the same elements will be offsetted.

4.- To remedy this, I initialized the position of each element by adding, within my Initialize() function, the following line, which ensures the lines, words, or chars will alway be animated from the same position (text2__hidden is the class given to each chars after SplitText).

tl.set('.text2__hidden', { transform:"matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"});

5.- To clean-up after myself, I added an onComplete function to revert the text back to its original state and tweened its autoAlpha property to 0 (concurrent to the SplitText animation) to keep it hidden.

.to('.animation__text2', 2, { autoAlpha:0, }, "erase+=1.5")

 

I am uncertain as of to how "clean" the solution is but the animation now works like a charm. Thank you guys for all your input; it really made me think holistically about the problem and guided me to the answer.

Link to comment
Share on other sites

Glad you found a solution. If your goal is to get rid of any transforms, you don't have to pass in that long matrix3d() value. You could do any of these:

 

tl.set('.text2__hidden', { transform:"none"});
//or
tl.set('.text2__hidden', { clearProps:"transform" });
//or explicitly reset things:
tl.set('.text2__hidden', { x:0, y:0, z:0, scale:1, rotation:0, skewX:0, skewY:0, rotationX:0, rotationY:0 });

 

Happy tweening!

  • Like 3
  • Thanks 1
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...