Jump to content
GreenSock

PawleyBoboli

Having trouble with SplitText revert

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 Folks,

 

I have been trying to add a SplitText animation to my accordion menu but I cannot get the revert function to work, and apparently, it doesn't work in the GSAP example either.

 

In the tutorial video here:  http://www.greensock.com/splittext/  , at the 8:21 mark Carl shows how calling 

function allDone() {
    mySplitText.revert();
}

returns the animated string elements back to a single div.  However, in the CopePen example at: 

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

  the same function is used but the string is not being reverted back to a single div.  I am getting the same behavior in my own attempts.  I can't figure out why but hopefully someone here knows.

 

Additionally, is it possible to chain separate SplitText animations and stagger their starts?  I have tried chaining a few SplitText animations into a TimelineLight but not getting this to work.

 

Thanks so much for any info.

--Kevin

  • Like 1
Link to comment
Share on other sites

Sorry about the confusion - that sample was missing a parameter. If you look at the docs, it shows that after the vars parameter, there's "stagger" (0.01 in this case), then "position" (which is the one that's missing here), and THEN the "onCompleteAll" callback. I just updated the codepen, adding the position parameter (the default of "+=0"). 

 

And yes, you can absolutely chain animations together - TimelineLite gives you pretty much unlimited flexibility. You have total control of the placement of every animation. 

var tl = new TimelineLite();
tl.staggerFrom(...);
tl.staggerTo(...);
...

You can define a "position" parameter to control precisely where things get placed (see the docs at

 

Does that help? 

  • 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.
×