Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI
Created Dec 19, 2018
Embed
What would you like to do?
Variable font - Animated over (weight)
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.
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 );
});
};
<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>
$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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment