Jump to content
GreenSock

jmsv

Animate Variable Font on Mouse Move

Go to solution Solved by GreenSock,

Recommended Posts

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

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.

:)

 

 

  • Like 1
Link to comment
Share on other sites

  • Solution

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.

  • Like 2
Link to comment
Share on other sites

@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

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. 

  • Like 1
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.
×