ceribbo Posted February 23 Share Posted February 23 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 Screen Recording 2024-02-23 at 18.41.43.mov Link to comment Share on other sites More sharing options...
GSAP Helper Posted February 23 Share Posted February 23 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. ✅ Link to comment Share on other sites More sharing options...
ceribbo Posted February 23 Author Share Posted February 23 Here it is my codepen solution: See the Pen mdoZwry by ceribbo (@ceribbo) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted February 23 Share Posted February 23 Looks like you'd need immediateRender:false on that second tween. See the Pen 5f531240826885ac537b347426264207 by PointC (@PointC) on CodePen Happy tweening. 2 Link to comment Share on other sites More sharing options...
mvaneijgen Posted February 23 Share Posted February 23 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 Link to comment Share on other sites More sharing options...
ceribbo Posted February 23 Author Share Posted February 23 Very thanks, moreover I found that my code has a transition property from default css, I needed to overwrite it Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now