Keyhan A Posted January 16, 2023 Share Posted January 16, 2023 Hi GSAP community, I'm trying to make some clipped area in a canvas which moves around with 'mousemove' event, I have other animations and interactions going on in the background using GSAP, and with adding this canvas everything gets laggy, is there any way to set/update my canvas position values using Gsap? ctx.arc(mouse.x, mouse.y, 70, 0, Math.PI*2, true) Note: I'm also using gsap.quickSetter for following cursor with mouse move and it works sooo nice. but due to some issues with colors in dark theme and css mix-blend-mode, this canvas was my second option to have such a masked area with clipped mouse cursor. I would really appreciate your helps. Regards, Keyhan See the Pen mdjMYbr by keyhan-a (@keyhan-a) on CodePen Link to comment Share on other sites More sharing options...
Keyhan A Posted January 16, 2023 Author Share Posted January 16, 2023 I figured out the solution after posting my issue and reading it for myself 😅 I used gsap.ticker and my canvas animates as smooth as everything else now! sorry for "spam" post! Link to comment Share on other sites More sharing options...
GreenSock Posted January 16, 2023 Share Posted January 16, 2023 No problem, @Keyhan A. Glad you figured it out. You might be able to get away with just using an onUpdate on your tween/timeline so that it only redraws when absolutely necessary, but it's hard to know without seeing a minimal demo with your GSAP code. Just a thought. It's totally fine to use the ticker thing if that's working well for you. 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