Jump to content


Tweening unitless line height

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I'm attempting to tween the line-height property of a div, containing multiple paragraphs. Using CSS best practices I'm using unitless values for line-height so that the value cascades. However when tweening values without units they are converted to pixels. I can probably hack around this, but I was wondering if it's possible to tell TweenLite not to do this conversion?

Link to comment
Share on other sites

You can do it by tweening the value of a created object and then passing that value using JQuery's css method, like this:


var par = $("p"),
    lHeight = par.css("line-height"),
    heightObj = {a:1},
    btn1 = $("button#btn1"),
    btn2 = $("button#btn2");

    TweenMax.to(heightObj, 1, {a:'+=.5',  onUpdate:lHeightChange});

    if(heightObj.a >= 1.1)
    TweenMax.to(heightObj, 1, {a:'-=.5', onUpdate:lHeightChange});

function lHeightChange()
    par.css("line-height", heightObj.a);


You may notice that in the conditional logic I've use >=1.1, that's because sometimes the end value of a could be 1.00000000001 which is bigger than 1 and that'll cause the line going smaller than 1.


You can see it working here:

See the Pen injvJ by rhernando (@rhernando) on CodePen


Hope this helps,



  • 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.