Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
alexprokop

Tweening unitless line height

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

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

$(document).ready(function(){

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

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

btn2.click(function()
{
    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,

Cheers,

Rodrigo.

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