Jump to content
GreenSock

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

Unable to re-run tween on hover and unable to place element back to its position after moving.

Recommended Posts

I am trying to apply wave effect to text. But unable to place elements to its original position. Also unable to re-run animation. Please help me with this. Word 'CloudLine' moving downwards than its original position.

See the Pen YdVbNR by vinod-kumar-kondabathula (@vinod-kumar-kondabathula) on CodePen

Link to comment
Share on other sites

i would suggest checking out the docs on staggerTo: https://greensock.com/docs/TimelineLite/staggerTo()

It will help you reduce your code.

 

i think for what you are doing you would be just fine playing and reversing the same timeline, but if you want 2 separate timelines I would suggest calling functions that create those timelines when you need them. Having 2 timelines restart() at the same time on the same elements will not work well.

 

Please see this article: https://css-tricks.com/writing-smarter-animation-code/

 

I didn't spend a lot of time trying to match the timing and all the settings, but this should give you something to start with:

 

 

See the Pen dwRbNj?editors=0010 by GreenSock (@GreenSock) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

Hi @Vinod,

 

The 'CloudLine' is transformed in your SVG data: "translate (0 -3.44)" and you tween y back to the absolute position of '0' which is lower.

Carl takes that into account and sets y back to '-3.44'.


Alternatively, you can also move the letters relatively on the y-axis using   '- = 10'   or    '+ = 10'

 

To animate the letters of 'CloudLine', it is helpful if they have the same class name: e.g. 'letter02'
And: Your SVG has multiple IDs with the same name. Info ID vs Class ...

 

A wave can be executed with two tweens staggerTo.
The last parameter in the second staggerTo positions it, starts it offset to the first: try numbers between 0.2 and 0.3

 

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

 

Happy tweening ...

Mikel

 

 

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