Jump to content
GreenSock

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

can i do calculation in the css?

Recommended Posts

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    body {
        font-family: "Helvetica Neue", Helvetica;
        width: 90%;
        font-weight: 200;
        letter-spacing: 1px;
        margin: 25px auto 0 auto;
        background: rgb(234, 235, 235);
        color: rgb(25, 25, 25);
    }
    
    div,
    p {
        margin: 0 auto;
    }
    
    p {
        color: rgb(125, 125, 125);
        font-size: 0.85rem;
        text-align: center;
        margin-bottom: 17px;
    }
    
    div {
        width: 35%;
        overflow: hidden;
    }
    </style>
    <script type="text/javascript" src="./TweenMax.min.js"></script>
</head>

<body>
    <p>
        Refresh this page to re-run the demo.
    </p>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
    </div>
    <script type="text/javascript">
    TweenMax.to("div", 1, {
        opacity: 0.5,
        width: "*=2",
        ease: Power1.easeInOut
    });
    </script>
</body>

</html>

above is the code i wrote,i want  the width of my div move to 70%,and  it does not work. But if i write:width:"+=300",it will work ,I don't know if i can write an expression in the tweenMax?my English is not very good, i hope someone can answer this for me!

Link to post
Share on other sites

Hi and welcome to the GreenSock forums,

 

You shouldn't have any problem animating the width as a percentage

TweenMax.to(".green", 3, {width:"100%"});

demo: http://codepen.io/GreenSock/pen/wWAXwm

 

And you can also use expressions. It's just that your value of "*=2" is just a String, not a valid expression.

 

You could do something like:  

{width: myElement.style.width * 2}

if you need more help, please provide a simple demo (just fork my demo above) so we can what isn't working.

 

Thanks!

  • Like 1
Link to post
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.

×