Jump to content


Loop problem with Split Text

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


I'm trying to make a hover effect multiple menu items (just one to start in the codepen taken from a big project). I want the text to drop down then pop back up on mouseover, as apposed to drop down on mouse over then come back up on mouse leave.


I've googled the problem and found a few threads & it seems the problem is passing params through. The attached image is the console errors I get in the project which is too big to put in a codepen. However when I take a snippet out the errors change.


Very frustrated with this... :( Any ideas lol?


Here is the thread with the same problem - https://github.com/greensock/GreenSock-JS/issues/119


Screen Shot 2018-06-29 at 14.03.34.png

See the Pen QxzMxm by smallio (@smallio) on CodePen

Link to comment
Share on other sites

Hi @smallio,


is this better ...


function func() {
  TweenMax.staggerTo(split.chars, 0.5, {y:78, ease: Elastic.easeOut.config(.4, .95), force3D:true}, 0.03, 0);
//  TweenMax.staggerTo(split.chars, 0.5, {y:0, ease: Elastic.easeOut.config(.4, .95), force3D:true, onComplete:funcAgain}, 0.03, 0.5);


Sewn twice, sometimes does not work.


Or, is that,what you want to achieve (position problem):


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


Try it.


  • Like 2
Link to comment
Share on other sites

Hi @mikel


I actually managed to find a way round it with another function thanks to your idea. However that brings me to another question. How can I make this work dynamically without just copy and pasting & changing the names?


See the Pen aKPVWE?editors=1010 by smallio (@smallio) on CodePen




I also have this little glitch when I do this in my full site. Any ideas how to stop that?





Thanks :)

Link to comment
Share on other sites

Hi @smallio :)


Is there any reason you're not creating a timeline for each of those and playing it on mouseenter? Something like this:



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


Does that help at all? Happy tweening.



  • Like 3
Link to comment
Share on other sites

Ah this is almost exactly what I was looking for! Thank you! :) The problem is that I need them to bounce back and reverse direction so they are not hidden for so long (see the 10 second the Vimeo video). When I try and attempt this it ends up being a mess because the animation hasn't finished going down and then glitches up.


Is there anyway to make it reverse back up without changing the actual time of the action?


See the Pen JZwLPr?editors=0010 by smallio (@smallio) on CodePen



Link to comment
Share on other sites

I'd probably just adjust the eases a bit. Maybe something like this?


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

You can adjust the config in those elastic eases to your liking or create a custom ease too. When you're looking for a smooth transition from the first to the second tween, you'll usually want to easeIn to the first and easeOut of the second. You had them both as easeOut in your original demo which can be problematic for the type of effect you're looking for here.


Happy tweening.



  • Like 5
Link to comment
Share on other sites



Ah love it dude!!! 


Thank you so much :)

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

@PointC I used your code to create this, but wondering how I can reverse the animation on mouseleave without the stuttering issue. If you mouse over the links vertically quickly you will see the animations start and stop making it look jerky, what is the best method to address this?


See the Pen NQwxzO by samandalso (@samandalso) on CodePen

Link to comment
Share on other sites

Do you need to reverse it from the end? I'd just play/reverse on hover like this:


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


Does that help? Happy tweening.



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