Smooth Resize Animation with Pure JavaScript

Question

I'm trying to work in a [smooth] resize animation effect into my web application. The problem is CSS3's animation and transition effects often stutter so I've decided to go with a JavaScript approach. I don't want to use jQuery UI or any form of jQuery because the loading time, though miniscule when served through a CDN, is one extra HTTP Request. Any suggestion on an approach?

Good luck finding Javascript driven animations that generally do less stutter than CSS3 animations. JS is single threaded and shares CPU with all your other JS activities. Thus, it can never be counted on for perfect timing. — jfriend00, Jan 06 '16 at 06:53
Even for it being single threaded, it still seems to out perform CSS3 animations and transitions. — White Lotus, Jan 06 '16 at 06:56
Would you be able to provide more details on what animations are you trying to do? — Kelv.Gonzales, Jan 06 '16 at 06:57
Animation: [resize] not sure how to be more clearer than that. It says it in the post. — White Lotus, Jan 06 '16 at 07:00
There might be ways to improve your animations in CSS. If you provide more context we can all help. — Brett DeWoody, Jan 06 '16 at 07:09
Please show a working jsFiddle of the exact CSS animation you have currently that is not working the way you want so we can see what you think is not performing properly and what you're trying to achieve. Only then can we form any idea how to help. Also, what browsers are you seeing the problem in and what browsers are your targeting? Resize animations also make a huge difference if they cause relayout because then you have all the layout and redraw from that too. We need to see exactly what problem you're trying to solve. "resize animation" is not enough of a description by itself. — jfriend00, Jan 06 '16 at 07:11
Also, you may as well benchmark a jQuery-based resize animation to see if it meets your needs. If not, then you're probably not going to beat it with plain JS so that's the cheapest way to run a test. If it does look good to you, then you can work on replacing jQuery as the animation engine if you really find that worth doing. And, there are plenty of JS-based animation focused libraries on the web you can use or copy from. — jfriend00, Jan 06 '16 at 07:15
I'm almost sure like none of you actually read the post. Loading jQuery is about the HTTP Request not the performance. Secondly, the box also is doing a resize to load the content into the element so I should go with the JavaScript approach. Thirdly, quit saying I need to provide a solution in CSS3 when I strictly said no CSS3 animations or transitions. — White Lotus, Jan 06 '16 at 07:20
We NEED to see your animation and the circumstances around it to know what your problem is. I suggested you test a JS animation with jQuery just to see if it will do better than what you already have because that is a well developed animation library already. I didn't suggest it as a solution, but as a test you could run in a few minutes time without reinventing an entire animation library just to see if it even does any better. Geez. For someone asking for help here you are very uncooperative when we ask to see the actual circumstances of your problem! I will leave now. — jfriend00, Jan 06 '16 at 07:38
Various references on how to do JS animation: [Fixing slow animation in Chrome](http://stackoverflow.com/a/8871078/816620), [Doing smooth animation](http://stackoverflow.com/questions/7454983/javascript-smooth-animation-from-x-y-to-x1-y1/7455571#7455571), [Making CSS3 animations smoother](http://stackoverflow.com/questions/13166128/slide-animation-works-well-in-firefox-but-stutters-in-chrome/13166237#13166237), [Plain Javascript animation code with tweening](http://stackoverflow.com/questions/20177374/stop-animate-jquery-functions-into-javascript/20177460#20177460). — jfriend00, Jan 06 '16 at 08:05
And [Simple animation using `requestAnimationFrame()`](http://www.sitepoint.com/simple-animations-using-requestanimationframe/). — jfriend00, Jan 06 '16 at 08:12
I'd also be curious what you think is not smooth about this CSS animation: https://jsfiddle.net/jfriend00/dhzyz084/ that Javascript animation could do better. — jfriend00, Jan 06 '16 at 08:31
Are you not getting a stutter effect when the box gets larger? As in the sides don't align when the box is getting larger? I'm also seeing a small pause occasionally during this transition. — White Lotus, Jan 06 '16 at 08:35
No pause here at all. Perfectly smooth in all three browsers I tried. What computer and browser are you running it on when you see the stutter? This is why I wanted you to show us an example of where you saw a problem. We need to get to the root of that before you go off designing something different. — jfriend00, Jan 06 '16 at 08:42
Windows 7 Ult 64-bit with 16GB of ram and Firefox 40.1, but if I can get it working on the browser with the least memory. Shouldn't it work for any up-scaled browser? — White Lotus, Jan 06 '16 at 08:47
Here's CSS3 animation and Javascript animation in the same jsFiddle: https://jsfiddle.net/jfriend00/dhzyz084/. Both are relatively smooth for me. I can't say both are completely perfect all the time, but pretty good. The CSS3 looks a bit smoother to me. — jfriend00, Jan 06 '16 at 08:58
And, here's a CSS3 animation that includes tricks to encourage use of the CPU for animations: https://jsfiddle.net/jfriend00/whwo6mL6/. I can't tell if it's better or not on my computer. You can judge on yours. — jfriend00, Jan 06 '16 at 09:30
And, an interesting article: [Replacing jQuery Animation With CSS Hardware Accelerated](http://www.onlywebpro.com/2014/05/01/replacing-jquery-animation-with-css-hardware-accelerated/). — jfriend00, Jan 06 '16 at 09:33
Great article! I never dipped my feet in the world of mobile web design but this has intrigued me. — White Lotus, Jan 06 '16 at 09:42

score 0 · Accepted Answer · answered Jan 06 '16 at 07:36

0

pure javascript to change height of div try this,,

var myVar = null;
function cal(){
  var aa = document.getElementById("aa");
  var h = aa.style.height;
  h=parseInt(h.replace("px",""));
  myVar = setInterval(function(){
      if(h > 100){
        myStopFunction();
      }else{
        h+=5;
        aa.style.height = h+"px";
      }
      
  },30);

}

function myStopFunction() {
    clearInterval(myVar);
}

<div id="aa" style="background-color:rgba(0, 119, 221, 0.47);height:30px;">
  try this
</div>
<button onclick="cal()">click here</button>

answered Jan 06 '16 at 07:36

Divesh Oswal

250
3
13

Thank you, an actual solution instead of a comment. I can work with this! – White Lotus Jan 06 '16 at 07:39
@WhiteLotus - In case you care, this isn't even close to as smooth as it could be. Good JS animations don't just use an interval timer and don't just increment a fixed amount on each tick. They use `requestAnimationFrame()` and they calculate each new position based on elapsed completion. That gives you the most frames possible and handles the variability in when interval timers are actually called to give you the best smoothness. There are thousands of articles on JS animations on the web if you care to learn. – jfriend00 Jan 06 '16 at 07:43
@jfriend00 I never said anything about it having to be smooth on the first try, I wanted to see what the possible methods were for doing an animation in pure JavaScript. I've never heard of the requestAnimtionFrame() method. Thanks for that suggestion. – White Lotus Jan 06 '16 at 07:48
@WhiteLotus - look at the title of your question "Smooth Resize Animation ...". Geez. Please do some basic Google research on Javascript animation. You have a lot to learn and there is a ton out there written to help you. This site works better when you go learn, try some things, then come back here when you get stuck with a more specific problem rather than ask a "from scratch" general question here and expect us to provide you general animation code. You may have been surprised how much help you got if you provided an exact working example of the animation that you considered choppy. – jfriend00 Jan 06 '16 at 07:51
Yes smooth in the end. Next time do I need to highlight that it should be smooth [from the beginning]? – White Lotus Jan 06 '16 at 07:54

Smooth Resize Animation with Pure JavaScript

1 Answers1