Jump to content
Search Community

Loop problem with Split Text

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

Mikel

  • 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?

 

https://vimeo.com/277655093

 

 

Thanks :)

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

 

@PointC

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

  • 1 year later...

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