Make a text disappear on top and reappear from bottom

[ceribbo]

Hi, i want to animate a text when onMouseOver, the animation show move the text to the top and then, appear from the bottom, I have a simple video example here attached, any suggestion?

I tried applying a .to(top) and then a .from(bottom) in a timeline but it is not working.

Thank you

 

[GSAP Helper]

Can you show us what you'v tried already in a minimal demo?

 

We love to see minimal demo's because that way we can see your thought process and thus better help you understand the tools!

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[ceribbo]

Here it is my codepen solution:

 

 

See the Pen mdoZwry by ceribbo (@ceribbo) on CodePen

[PointC]

Looks like you'd need immediateRender:false on that second tween. 

 

See the Pen 5f531240826885ac537b347426264207 by PointC (@PointC) on CodePen

 

Happy tweening.

 

[mvaneijgen]

And if you want the in and out animation to happen at the same time. you'll have to clone the element. Hope it helps and happy tweening!  

 

See the Pen wvOLqWm?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[ceribbo]

Very thanks, moreover I found that my code has a transition property from default css, I needed to overwrite it