How to transition / interpolate smoothly between variable font weights when states change onscroll()

Question

I'm looking to create some fun effects with variable fonts for a personal website. The goal is for them to be as smooth and seamless as possible. At first I was hoping to achieve that with css animations and hover effects, but it seems like you can't create a smooth transition between the two so I'm trying jquery now.

Here's what I'm doing: Changing the weight of the variable font for a period of time when the user scrolls. As it is now, the weight 'jumps' from 'wght' 100 to 'wght' 1000 for 500ms after a scroll event.

let timeoutId;
 
 window.onscroll = (e) => {  
 
   $('.two').css({"font-variation-settings":"'wght' 1000"});

  if(timeoutId ){
           clearTimeout(timeoutId );  
    }
    timeoutId = setTimeout(function(){
     $('.two').css({"font-variation-settings":"'wght' 100"}); 
    }, 500);

Here's a fiddle: https://jsfiddle.net/samseurynck/m4gsv970/14/

What I'd like it to do is interpolate between the two weights so it's a visually smooth transition.

What's the best way to do that?

How to transition / interpolate smoothly between variable font weights when states change onscroll()

0 Answers0