CSS vs Velocity vs TweenMax (v4)

Revision 4 of this benchmark created on

Description

Now using TweenMax.set instead of TweenMax.to - i.e immediate and force3D:true for tween.

Preparation HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/0.7.0/jquery.velocity.min.js"></script>
<div class="test-element" style="width: 100px; height: 100px; background-color:red;"></div>

Setup

var $element = $('.test-element');

Teardown


    $element.css('transform', '');

Test runner

Ready to run.

Testing in
TestOps/sec
Velocity
$element.velocity({
  scale: 2
}, {
  duration: 0
});
ready
TweenMax
TweenMax.set($element, {
  scale: 2,
  force3D: true
});
ready
Jquery
$element.css("scale", 2);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.