velvety variable font weight hover with gsap

Let's recreate this velvety variable font weight hover animation with GSAP! I stumbled on this animation when Julian posted it on LinkedIn and had to poke around the code! I changed a few things: removed jQuery, trimmed down the code, refactor to module syntax, add match media query to only run the code on desktop, and reduce the burden of mathematics with GSAP mapRange utility. Big ups to Julian for sharing this one!
🤝 Julian's:
webflow.grsm.io/cloneable-is-...
👯‍♀️ Clone it:
try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae

[@SinaNouri21]

Thanks for the tutorial. Can we do this on scroll ?
Ill be really happy if you teach this

[@libra.]

0:22 bro has his own producer tag 😂

[@webbae]

Yes! The people are beginning to understand! 🤣

[@heatherliu6856]

What if you run the code on one of those huge touch screens that are wider than 992 px? 🧐 Will the universe blow up?

[@webbae]

prolly. yes.

[@twlysh]

Nice shirt webbae

[@alexandrb1543]

This is awesome! I’ll definitely recreate that!
Here is a video idea for you: create a tutorial for a parallax-like scroll for multiple images on mobile devices, especially for safari. I found an example of the idea, but can’t share the link here.

[@webbae]

Sounds fun! Feel free to hop in discord and share with me there if you’d like.

[@alexandrb1543]

@@webbae joining!

[@libra.]

what code editor is that?

[@webbae]

VS Code. I’ve got it in Zen mode 🧘‍♂️

[@webbae]

Command + K then press Z