PG1 Posted January 31, 2021 Share Posted January 31, 2021 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 More sharing options...
ZachSaucier Posted February 1, 2021 Share Posted February 1, 2021 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. 3 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