Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make Swing (or bounce) effect slowdown

Make Swing (or bounce) effect slowdown

Problem

I guess this would apply to swinging, or bouncing. An example on how to make an object swing here in another post, where this code was posted: http://jsfiddle.net/gVCWE/149/

How would you make the swinging slow down to a stop?

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

I would like to do other 'inertia effects' as well. I do not mind using JavaScript or JQuery if that's necessary. I feel like CSS alone or keyframes is not enough for what I want to do.

I'm fine using setInterval and doing something like this:

function prepareAnimation()
{
    setInterval(slowAnimation, 200)
}

function slowAnimation()
{
    speed=$(".box").getSpeed(); // how would I write getSpeed?
    if(speed

I do not know the best way to changing animation properties through script. Especially when it comes to changing the duration in the middle of an animation, which I'm not sure is possible at all. Thanks.

Problem courtesy of: Dave

Solution

http://jsfiddle.net/gVCWE/150/

(function swing() {
    var ang  = 20,
        dAng = 1,
        dir  = 1,
        box = document.getElementById("box");

    (function setAng(ang){
        box.style.WebkitTransform =  'rotate('+ang+'deg)';
        box.style.MozTransform =  'rotate('+ang+'deg)';
        dir = -dir;
        if (Math.abs(ang) > 0)
            setTimeout(setAng, 1000, dir * (Math.abs(ang)-dAng));
    })(ang);
})();​

CSS

.box{
    width:50px; height:150px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-transition:-moz-transform 1s ease-in-out;
    -moz-transform-origin: center top;
    -webkit-transition:-webkit-transform 1s ease-in-out;
    -webkit-transform-origin:top;
}

You can switch the initial direction by making the initial values of ang and dir negative. You can make the "swinging" slow more quickly by increasing the value of dAng, but it should be a factor of ang.

Solution courtesy of: Shmiddty

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Make Swing (or bounce) effect slowdown

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×