Jump to content
GreenSock

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

Loop problem with Split Text

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 post
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.

Mikel

  • Like 2
Link to post
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?

 

https://vimeo.com/277655093

 

 

Thanks :)

Link to post
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 post
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

 

@PointC

Link to post
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 post
Share on other sites

@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 post
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 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.

×