Animating in splitText after animating out

[paulfitz99]

I am trying to use Greensock's split text plugin to animate text in on one click and out on another. It is animating in as I want, and working perfectly. However, I am having difficulties animating the text out.

 

It is animating out as I want, however, when the animation is complete, and i try and animate the text back in as originally it no longer works.

 

I have created a code pen here to demonstrate the issue I am having.

 

I have attempted to use the invalidate method http://greensock.com/docs/#/HTML5/GSAP/TweenLite/invalidate/ however it didn't work. I also tried clearProps: all, which didn't work either.

 

See the Pen bwvyBr by Pau1fitz (@Pau1fitz) on CodePen

[Jonathan]

Hello paulfitz99, and Welcome to the GreenSock Forum!

 

One way is to use TimelineMax and just play() on animateIn() and reverse() the timeline when animateOut().

 

See the Pen ALyGYQ by jonathan (@jonathan) on CodePen

 

The above is just one way.. it could have been done in many ways i was just showing you one way with the existing code you already had.