mea_culpa Posted May 5, 2022 Share Posted May 5, 2022 Attached example is almost my goal, additionaly to it I want to run animation based on mouse position. The part of code I have: btn.addEventListener('mouseover', (e) => { rect = btn.getBoundingClientRect(); offset = { top: rect.top + window.scrollY, left: rect.left + window.scrollX, }; x = e.pageX - offset.left; y = e.pageY - offset.top; ripple2.style.cssText = ` top: ${y}px; left: ${x}px; `; tl.play(); }); Can someone point me to the right path?Thanks in advance! See the Pen PooqwQy by GreenSock (@GreenSock) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted May 5, 2022 Share Posted May 5, 2022 Hi mea_culpa, Did you have a question? Link to comment Share on other sites More sharing options...
mea_culpa Posted May 5, 2022 Author Share Posted May 5, 2022 Hi, yea. How to run timeline from specific point on element using e.offset property, which is only allowed inside addEventListener? Link to comment Share on other sites More sharing options...
Cassie Posted May 5, 2022 Share Posted May 5, 2022 Hey there! You were using a very old version of GSAP so I've updated to the new syntax for you. However - I'm not really sure what you mean by Quote 'run timeline from specific point on element using e.offset property' You can tween the progress of a timeline... gsap.to(tl, {progress:0.5}); But I'm not quite sure how this fits into your provided demo as it's just a very short hover animation. There's not even really a need for a timeline at all as there aren't multiple steps to the animation. What are you aiming for the outcome to be? Could you maybe explain what the end goal is? See the Pen qBxOEWj?editors=0011 by GreenSock (@GreenSock) on CodePen 1 Link to comment Share on other sites More sharing options...
mea_culpa Posted May 5, 2022 Author Share Posted May 5, 2022 Thanks for answer! Sorry for being unclear. Better example of what I want to achieve: See the Pen LYOJBX by kris-ellery (@kris-ellery) on CodePen So, I want to have a ripple effect on mouseover, and reverse it on mouseout (instead of click, like in attached codepen link). Note that animation happens in exactly clicked place on button, this is exactly what I'm asking about. So to recap: I want to create ripple animation (like in attached codepen link) exactly where user hovers button, but on mouse out I want to reverse ripple animation in same place when it happened on hover. Link to comment Share on other sites More sharing options...
Solution Cassie Posted May 5, 2022 Solution Share Posted May 5, 2022 Oh ok! Gotcha. Something like this? See the Pen PooqwQy?editors=0011 by GreenSock (@GreenSock) on CodePen 2 Link to comment Share on other sites More sharing options...
mea_culpa Posted May 5, 2022 Author Share Posted May 5, 2022 Wow! Thanks a lot! 1 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