jmsv Posted June 2, 2022 Share Posted June 2, 2022 I'm looking to create the effect seen here: https://share.cleanshot.com/w14HYe In the current site there's a `maximum call stack error` that's thrown in the `mousemove` event, surfacing from `addPropTween`. I recreated the setup in codepen, and I don't see the call stack error, but the animation doesn't work either. I'm trying to use the `gsap.quickTo` method I've seen in other `mousemove` animations throughout the docs and forums. Really appreciate any help! See the Pen WNMybYo by jamesvclements (@jamesvclements) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted June 2, 2022 Share Posted June 2, 2022 Hi @jmsv Welcome to the forum. I'm not 100% sure why that isn't working but I've never use a CSS variable in a quickTo like that. I forked your pen and used regular .to() tween with overwrite:true and that seems to work just fine. See the Pen 5a5b57ee5b2604c55c96196a107460b1 by PointC (@PointC) on CodePen It also works fine just setting the property with some vanilla JS. See the Pen 1fc0ed60e7cb73262d264d47e447e3f6 by PointC (@PointC) on CodePen Maybe I'm missing something obvious with quickTo. Hopefully @GreenSock can clarify. Happy tweening and welcome aboard. 1 Link to comment Share on other sites More sharing options...
Solution GreenSock Posted June 2, 2022 Solution Share Posted June 2, 2022 Ah, that's a tricky scenario (handling CSS variables) but I think I've got it working for simple CSS variables in the next release which you can preview at https://assets.codepen.io/16327/gsap-latest-beta.min.js Better? Thanks for bringing that to our attention. 2 Link to comment Share on other sites More sharing options...
jmsv Posted June 2, 2022 Author Share Posted June 2, 2022 @GreenSock yep, works like a charm. Thank you—and thanks @PointC! Two quick follow-ups if you have the time: 1. Launching this site around the end of the month—do you think the beta will release by then / safe to use the beta in prod? 2. Is GSAP handling throttling / debouncing automatically or should I add logic to debounce something that's fired as often as `mousemove`? Link to comment Share on other sites More sharing options...
GreenSock Posted June 2, 2022 Share Posted June 2, 2022 13 minutes ago, jmsv said: 1. Launching this site around the end of the month—do you think the beta will release by then / safe to use the beta in prod? I'd say there's a decent chance, but we can't guarantee any specific launch dates. You're welcome to use that beta file if you need it. 14 minutes ago, jmsv said: Is GSAP handling throttling / debouncing automatically or should I add logic to debounce something that's fired as often as `mousemove`? GSAP updates with a requestAnimationFrame(), so you shouldn't really need debouncing but I suppose if you're worried about crazy amounts of calls to the .quickTo() function between screen updates, you could add a debounce of your own. I doubt you'd ever notice a real-world difference. 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