Animation runs choppy - how can I fix it?
Can anyone give me some pointers for making the show/hide animation smooth? I wanted something that could replace jQuery's show/hide with a "blind" effect. The element I'm working with is centered using margin: 0px auto; and I can't be sure of the final height. So basically I'd like to animate from visible down to height/margin/padding 0, and invisible up to height auto (margin/padding being whatever they might have been previously).
To do so I made a .GSAPHideMe_CenteredElement clas
Sure. Don't animate all the things...
#banner-message {
background: #fff;
border-radius: 4px;
padding: 20px;
font-size: 25px;
text-align: center;
/* transition: all 0.2s; */
margin: 0 auto;
width: 75%;
}
CSS and JS can't animate the same properties. If you need CSS transitions on an element you're animating with JS, you should explicitly list those properties. Using "all" can also impact performance because the browser has to watch for chan
