replace gsap with velocity.js

for animations. velocity.js is MIT licensed. Unfortunately the scroll animation of velocity.js is not perfectly in sync with transforms. Thus the animations is slightly shuttering.

app/assets/javascripts/app/controllers/ticket_zoom.js.coffee

@@ -731,7 +731,7 @@ class ArticleView extends App.Controller
   toggle_meta: (e) ->
     e.preventDefault()
 
-    animSpeed = 0.25
+    animSpeed = 250
     article = $(e.target).closest('.ticket-article-item')
     metaTopClip = article.find('.article-meta-clip.top')
     metaBottomClip = article.find('.article-meta-clip.bottom')
@@ -746,24 +746,38 @@ class ArticleView extends App.Controller
       article.removeClass('state--folde-out')
 
       # scroll back up
-      TweenLite.to(article.scrollParent(), animSpeed, { scrollTo: article.scrollParent().scrollTop() - metaTop.outerHeight() })
+      article.velocity("scroll",
+        container: article.scrollParent()
+        offset: -article.offset().top - metaTop.outerHeight()
+        duration: animSpeed
+        easing: 'easeOutQuad'
+      )
 
-      TweenLite.to(metaTop, animSpeed, { y: 0, opacity: 0, onComplete: -> metaTop.addClass('hide') })
+      metaTop.velocity({ top: 0, opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide'))
-      TweenLite.to(metaBottom, animSpeed, { y: -metaBottom.outerHeight(), opacity: 0, onComplete: -> metaTop.addClass('hide') })
+      metaBottom.velocity({ top: -metaBottom.outerHeight(), opacity: 0 }, animSpeed, 'easeOutQuad', -> metaTop.addClass('hide'))
-      TweenLite.to(metaTopClip, animSpeed, { height: 0 })
+      metaTopClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad')
-      TweenLite.to(metaBottomClip, animSpeed, { height: 0 })
+      metaBottomClip.velocity({ height: 0 }, animSpeed, 'easeOutQuad')
     else
       article.addClass('state--folde-out')
       metaBottom.removeClass('hide')
       metaTop.removeClass('hide')
 
       # balance out the top meta height by scrolling down
-      TweenLite.to(article.scrollParent(), animSpeed, { scrollTo: article.scrollParent().scrollTop() + metaTop.outerHeight() })
+      article.velocity("scroll", 
+        container: article.scrollParent()
+        offset: -article.offset().top + metaTop.outerHeight()
+        duration: animSpeed
+        easing: 'easeOutQuad'
+      )
 
-      TweenLite.fromTo(metaTop, animSpeed, { y: metaTop.outerHeight(), opacity: 0 }, { y: 0, opacity: 1 })
+      metaTop
-      TweenLite.fromTo(metaBottom, animSpeed, { y: -metaBottom.outerHeight(), opacity: 0 }, { y: 0, opacity: 1 })
+        .velocity({ top: metaTop.outerHeight(), opacity: 0 }, 0)
-      TweenLite.to(metaTopClip, animSpeed, { height: metaTop.outerHeight() })
+        .velocity({ top: 0, opacity: 1 }, animSpeed, 'easeOutQuad')
-      TweenLite.to(metaBottomClip, animSpeed, { height: metaBottom.outerHeight() })
+      metaBottom
+        .velocity({ top: -metaBottom.outerHeight(), opacity: 0 }, 0)
+        .velocity({ top: 0, opacity: 1 }, animSpeed, 'easeOutQuad')
+      metaTopClip.velocity({ height: metaTop.outerHeight() }, animSpeed, 'easeOutQuad')
+      metaBottomClip.velocity({ height: metaBottom.outerHeight() }, animSpeed, 'easeOutQuad')
 
   isOrContains: (node, container) ->
     while node

app/assets/javascripts/app/lib/gsap/ScrollToPlugin.js

@@ -1,120 +0,0 @@
-/*!
- * VERSION: 1.7.4
- * DATE: 2014-07-17
- * UPDATES AND DOCS AT: http://www.greensock.com
- *
- * @license Copyright (c) 2008-2014, GreenSock. All rights reserved.
- * This work is subject to the terms at http://www.greensock.com/terms_of_use.html or for
- * Club GreenSock members, the software agreement that was issued with your membership.
- * 
- * @author: Jack Doyle, jack@greensock.com
- **/
-var _gsScope = (typeof(module) !== "undefined" && module.exports && typeof(global) !== "undefined") ? global : this || window; //helps ensure compatibility with AMD/RequireJS and CommonJS/Node
-(_gsScope._gsQueue || (_gsScope._gsQueue = [])).push( function() {
-
-	"use strict";
-
-	var _doc = document.documentElement,
-		_window = window,
-		_max = function(element, axis) {
-			var dim = (axis === "x") ? "Width" : "Height",
-				scroll = "scroll" + dim,
-				client = "client" + dim,
-				body = document.body;
-			return (element === _window || element === _doc || element === body) ? Math.max(_doc[scroll], body[scroll]) - (_window["inner" + dim] || Math.max(_doc[client], body[client])) : element[scroll] - element["offset" + dim];
-		},
-
-		ScrollToPlugin = _gsScope._gsDefine.plugin({
-			propName: "scrollTo",
-			API: 2,
-			version:"1.7.4",
-
-			//called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
-			init: function(target, value, tween) {
-				this._wdw = (target === _window);
-				this._target = target;
-				this._tween = tween;
-				if (typeof(value) !== "object") {
-					value = {y:value}; //if we don't receive an object as the parameter, assume the user intends "y".
-				}
-				this.vars = value;
-				this._autoKill = (value.autoKill !== false);
-				this.x = this.xPrev = this.getX();
-				this.y = this.yPrev = this.getY();
-				if (value.x != null) {
-					this._addTween(this, "x", this.x, (value.x === "max") ? _max(target, "x") : value.x, "scrollTo_x", true);
-					this._overwriteProps.push("scrollTo_x");
-				} else {
-					this.skipX = true;
-				}
-				if (value.y != null) {
-					this._addTween(this, "y", this.y, (value.y === "max") ? _max(target, "y") : value.y, "scrollTo_y", true);
-					this._overwriteProps.push("scrollTo_y");
-				} else {
-					this.skipY = true;
-				}
-				return true;
-			},
-
-			//called each time the values should be updated, and the ratio gets passed as the only parameter (typically it's a value between 0 and 1, but it can exceed those when using an ease like Elastic.easeOut or Back.easeOut, etc.)
-			set: function(v) {
-				this._super.setRatio.call(this, v);
-
-				var x = (this._wdw || !this.skipX) ? this.getX() : this.xPrev,
-					y = (this._wdw || !this.skipY) ? this.getY() : this.yPrev,
-					yDif = y - this.yPrev,
-					xDif = x - this.xPrev;
-
-				if (this._autoKill) {
-					//note: iOS has a bug that throws off the scroll by several pixels, so we need to check if it's within 7 pixels of the previous one that we set instead of just looking for an exact match.
-					if (!this.skipX && (xDif > 7 || xDif < -7) && x < _max(this._target, "x")) {
-						this.skipX = true; //if the user scrolls separately, we should stop tweening!
-					}
-					if (!this.skipY && (yDif > 7 || yDif < -7) && y < _max(this._target, "y")) {
-						this.skipY = true; //if the user scrolls separately, we should stop tweening!
-					}
-					if (this.skipX && this.skipY) {
-						this._tween.kill();
-						if (this.vars.onAutoKill) {
-							this.vars.onAutoKill.apply(this.vars.onAutoKillScope || this._tween, this.vars.onAutoKillParams || []);
-						}
-					}
-				}
-				if (this._wdw) {
-					_window.scrollTo((!this.skipX) ? this.x : x, (!this.skipY) ? this.y : y);
-				} else {
-					if (!this.skipY) {
-						this._target.scrollTop = this.y;
-					}
-					if (!this.skipX) {
-						this._target.scrollLeft = this.x;
-					}
-				}
-				this.xPrev = this.x;
-				this.yPrev = this.y;
-			}
-
-		}),
-		p = ScrollToPlugin.prototype;
-
-	ScrollToPlugin.max = _max;
-
-	p.getX = function() {
-		return (!this._wdw) ? this._target.scrollLeft : (_window.pageXOffset != null) ? _window.pageXOffset : (_doc.scrollLeft != null) ? _doc.scrollLeft : document.body.scrollLeft;
-	};
-
-	p.getY = function() {
-		return (!this._wdw) ? this._target.scrollTop : (_window.pageYOffset != null) ? _window.pageYOffset : (_doc.scrollTop != null) ? _doc.scrollTop : document.body.scrollTop;
-	};
-
-	p._kill = function(lookup) {
-		if (lookup.scrollTo_x) {
-			this.skipX = true;
-		}
-		if (lookup.scrollTo_y) {
-			this.skipY = true;
-		}
-		return this._super._kill.call(this, lookup);
-	};
-
-}); if (_gsScope._gsDefine) { _gsScope._gsQueue.pop()(); }

app/assets/javascripts/application.js

@@ -8,6 +8,7 @@
 //= require ./app/lib/core/jquery-1.11.0.js
 //= require ./app/lib/core/jquery-ui-1.8.23.custom.min.js
 //= require ./app/lib/core/underscore-1.6.0.js
+//= require ./app/lib/core/jquery.velocity.min.js
 
 //not_used= require_tree ./app/lib/spine
 //= require ./app/lib/spine/spine.coffee
@@ -30,8 +31,6 @@
 
 //= require_tree ./app/lib/base
 
-//= require_tree ./app/lib/gsap
-
 //= require ./app/index.js.coffee
 
 // IE8 workaround for missing console.log