Variable font - Animated over (weight)

index.pug

section Lorem Ipsum is <a href="javascript:void(0);">simply dummy</a> text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, <a href="javascript:void(0);">remaining essentially unchanged</a>. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>Lorem Ipsum is simply dummy text of the printing and <a href="javascript:void(0);">typesetting industry</a> diummy text. <a href="javascript:void(0);">Lorem Ipsum</a> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in <a href="javascript:void(0);">the 1960s</a> with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

script.js

var win, container;
//-
$(document).ready(function($) {
  win = $(window);
  container = $('section');
  //-
  container.find('a').each(function(){
    new SplitFont( $(this) );
  });
});


//- FONT -
var SplitFont = function( _element ){
  var t = this;
  t.el = _element;
  t.splitText = new SplitText( t.el, {type:"words, chars"});
  t.numChars = t.splitText.chars.length;
  //
  t.chars = [];
  for(var i = 0; i < t.numChars; i++){
      var char = $(t.splitText.chars[i]);
      var text = char.text();
      char.html('<span class="c1">'+text+'</span><span class="c2">'+text+'</span>');
  }
  
  //- Functions
  t.changeWeight = function( _mouseX, _wght, _vel, _delayVel ){
    for(var i = 0; i < t.numChars; i++){
      var char = $(t.splitText.chars[i]);
      //-
      var delay =  Math.abs( char.offset().left - _mouseX ) * _delayVel;
      TweenMax.to( char.find('.c2'), _vel, {'font-variation-settings':'"wght" '+_wght+', "wdth" 250', delay: delay, overwrite:5} );
    }
  }
  
  //- Events
  t.el.bind('mouseenter', function(e){
    //$(this).addClass('over');
    t.changeWeight( e.clientX, 750, 0.3, 0.002 );

  }).bind('mouseleave', function(e){
    //$(this).removeClass('over');
    t.changeWeight( e.clientX, 100, 0.5, 0.002 );
  });
};

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText.min.js?v=234"></script>

style.stylus

$bgColor = #03A9F4

/*@font-face
  font-family "Gingham Variable"
  src url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff2") format("woff2"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/Gingham.woff") format("woff")
  */
$iniWgth = 100
$finWgth = 900

@font-face
    font-family 'FF Meta VF'
    src url('https://variablefonts.monotype.com/MetaVariableDemo-Set.woff2') format('woff2')
    font-display swap
    font-style normal italic
    font-weight $iniWgth $finWgth

*
  box-sizing border-box
  outline none
      
body
  background-color $bgColor
  width 100vw
  height 100vh
  position absolute
  top 0
  left 0
  display block
  text-align center
  padding 10vw
  overflow hidden
  overflow-y auto
  
  section
    overflow hidden
    width 100%
    //max-width 70%
    margin 0 auto
    display block
    //background-color rgba(255,0,0,0.5)
    text-align left
        
    font-family "FF Meta VF"
    font-variation-settings "wght" $iniWgth, "wdth" 250
    
    line-height 1.2
    letter-spacing .05em
    color #87d4f7
    font-size 3.5vw
    
    margin-bottom 10vh  
    
    a
      cursor pointer
      position relative
      color inherit
      word-wrap break-word
      color #fff
      text-decoration none

      > div // words
        > div // chars
          visibility visible
          cursor pointer
          pointer-events auto

          > span 
            font-variation-settings "wght" $iniWgth, "wdth" 250
            //transition font-variation-settings 3s ease-in-out

            &.c1
              visibility hidden
              background-color rgba(255,0,0,0.8)

            &.c2
              pointer-events auto
              position absolute
              top 0
              left 0
              z-index 27

variable-font-animated-over-weight.markdown

Variable font - Animated over (weight)

Variable font test

A Pen by Andros Guiradó on CodePen.

License.