Jump to content
Search Community

Triggering different effects on mouseenter vs mouseout events

PG1 test
Moderator Tag

Recommended Posts

Hi, 

 

I'm playing around with the text burn in and out from snorkltv here: 

See the Pen rNLLZGR by snorkltv (@snorkltv) on CodePen

 (the first 90 lines of my javascript are pulled from here).

 

What I'm trying to do in my pen is trigger the burn out effect when i mouse enter the panel. This currently works. When the mouse leaves the panel, I'd like the text to 'burn in' again, but it doesn't.  You can see the function is called from my console log statement on line 92...)

 

ideally I'd also like the text to initially "burn in" on page load too. 

 

Any ideas where I'm going wrong? Maybe I should be using different timelines...

 

Thanks in advance!

See the Pen bGBNaNx?editors=1111 by petegarvin1 (@petegarvin1) on CodePen

Link to comment
Share on other sites

Hey PG1.

 

You shouldn't be splitting your elements every time the mouse enters and exits. Only split it at the start. 

 

Besides that, you're making one of the most common GSAP mistakes: creating .from() logic issues. You should probably use .fromTo()s in your burnIn instead.

 

Fixing those issues, you should get something like this:

See the Pen vYyEwxb?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Note that I didn't fix the logical issue when a user hovers it in and out quickly before the animation completes. You'll have to decide what to do in that case - whether or overwrite the previous animation, whether to ignore it if the animation is completed, or something else.

 

FYI animating filters is not very performant. 

  • Like 3
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.
×
×
  • Create New...