Jump to content


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




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