A Pen by GreenSock.

index.html

<h1>Speed Test: VelocityJS, GSAP, jQuery, and Transit</h1>
<p>A reproduction of VelocityJS's "Performance Comparison #1" at <a href="http://julian.com/research/velocity/">http://julian.com/research/velocity/</a>, but using updated GSAP files.</p>
<div class="dataBody" id="dataBody-Performance">
	<select id="dataBody-PerformanceSelLibrary">
		<option value="" selected disabled>Engine</option>
		<option value="animate">jQuery</option>
		<option value="transition">Transit</option>
		<option value="gsap" selected>GSAP</option>
		<option value="velocity">Velocity</option>
	</select>
	<select id="dataBody-PerformanceSelCount">
		<option value="" disabled>Count</option>
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="5">5</option>
		<option value="10">10</option>
		<option value="15">15</option>
		<option value="25">25</option>
		<option value="50">50</option>
		<option value="75">75</option>
		<option value="100">100</option>
		<option value="150">150</option>
		<option value="250">250</option>
		<option value="350">350</option>
		<option value="1000">1000</option>
	</select>
	<input id="dataBody-Performance1BtnStart" type="button" value="Start" />
	<br />
	<br />
	<div id="dataBody-PerformanceStage"></div>
</div>

script.js

/*
This code was taken directly from the performance comparison #1 on VelocityJS's site, but this version uses an updated GSAP. The GSAP one would be even faster if we used it directly instead of going through the jquery.gsap.js plugin which has to do extra work to conform with jQuery's API.
*/
var isChrome = /Chrome/i.test(navigator.userAgent),
	isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);

/* Set the selected element count based on device type. */
var defaultPerformanceCount = isMobile ? 25 : (isChrome ? 350 : 100);

$("#dataBody-PerformanceSelCount option[value='" + defaultPerformanceCount + "']").prop("selected", true);

var $performanceStage = $("#dataBody-PerformanceStage"),
	performanceStageHtml = "",
	dummiesCount = 1000,
	$performanceStageDummies, i;

for (i = 0; i < dummiesCount; i++) {
	performanceStageHtml += "<div class='dataBody-PerformanceDummy' id='d" + i + "'></div>";
}

$performanceStageDummies = $(performanceStageHtml);

if (isMobile) {
	$performanceStageDummies.css("transform", "translateZ(0)");
}

$performanceStageDummies.appendTo($performanceStage);

var animateMapForward = {
			left: "85%",
     opacity: 1
		},
		animateMapReverse = {
			left: 0,
			opacity: 0.65
		},
		animateOptions = {
			duration: 850
		};

var HAAlerted1 = false;

$("#dataBody-Performance1BtnStart").on("click", function() {
	if (isMobile && !HAAlerted1) {
		HAAlerted1 = true;
		alert("Since Velocity automatically turns on hardware acceleration for mobile devices, hardware acceleration has been enabled for *all* libraries so that you can compare them on equal grounds.");
	}

	var performanceLibrary = $("#dataBody-PerformanceSelLibrary").val(),
		performanceCount = $("#dataBody-PerformanceSelCount").val() || $("#dataBody-PerformanceSelCount option").eq(2).val(),
		loopCount = 4,
		$performanceStageDummiesSlice;

	if (performanceLibrary) {

		if (performanceLibrary === "gsap") {
			$.gsap.enabled(true);
			performanceLibrary = "animate";
		} else {
			$.gsap.enabled(false);
		}

		/* With the $performanceStageDummies object that we've already appended to the DOM, slice off a portion equal to the chosen element count and show them. */
		$performanceStageDummiesSlice = $performanceStageDummies.slice(0, performanceCount);
		$performanceStageDummiesSlice.css("opacity", 0.65).show();

		for (i = 0; i < loopCount; i++) {
			$performanceStageDummiesSlice.each(function() {
				$(this)[performanceLibrary](animateMapForward, animateOptions)[performanceLibrary](animateMapReverse, animateOptions);
			});
			if (i === (loopCount - 1)) {
				$performanceStageDummiesSlice.delay(175)[performanceLibrary]({opacity:0}, function() {
          $performanceStageDummiesSlice.hide();
        });
			}
		}
	}
});

Speed-Test:-VelocityJS,-GSAP,-jQuery,-and-Transit.markdown

Speed Test: VelocityJS, GSAP, jQuery, and Transit

A reproduction of VelocityJS's "Performance Comparison #1" at http://julian.com/research/velocity/, but using updated GSAP files. Notice how GSAP prioritizes more accurate timing (start/end times) whereas VelocityJS will front-load the tween setup and delay the start (and completion) of the tweens, leading to pauses inbetween loops.

A Pen by GreenSock on CodePen.

License.

style.css

body {
  background-color: black;
  color: white;
  font-family: sans-serif;
  margin: 16px;
}
p {
  color: #bbb;
}
a {
  color: white;
}
.dataBody-PerformanceDummy {
  display: none;
  position: relative;
  left: 0;
  opacity: 0.65;
  filter: alpha(opacity=65);
  width: 15px;
  height: 15px;
  margin-bottom: 3px;
  border-radius: 15px;
  background-color: red;
}