Jump to content
Search Community

Animate Variable Font on Mouse Move

jmsv test
Moderator Tag

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

@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.
×
×
  • Create New...