Animated cursor

[gotik]

Hey, i've got the animated cursor, which is have two parts, small one, and the big one. When i'm trying to hover the element on website, the big part goes the border of this element. The problem is when i'm trying to scroll the page, my cursor is disappeared. How can i fix this?

See the Pen ZExEJqz by gotik29 (@gotik29) on CodePen

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting and logic troubleshooting. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

You need to adjust your value on scroll. You could do that in a "scroll" event handler and look at the deltaY of the event perhaps. 

 

I would also strongly recommend using the gsap.quickTo() for your tweens that are constantly getting recreated on each mousemove event. The way you've got them set up now, you're creating new instances every time and they're all conflicting with each other because you didn't set overwrite: true (or "auto"). That's bad for performance. 

 

You can post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question, we'd be happy to try to help with that.