Jump to content
GreenSock

mea_culpa

Mouseover / mouseout with e.offset

Go to solution Solved by Cassie,

Recommended Posts

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

Hi mea_culpa,

 

Did you have a question? 

Link to comment
Share on other sites

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

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

  • Like 1
Link to comment
Share on other sites

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

Wow! Thanks a lot!

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