Change to batched animation updates [fixes #87]

src/bezier.js

@@ -166,7 +166,7 @@ const getCubicBezierTransition = (x1, y1, x2, y2) => pos =>
  * attached to {@link shifty.Tweenable.formulas}.
  */
 export const setBezierFunction = (name, x1, y1, x2, y2) => {
-  let cubicBezierTransition = getCubicBezierTransition(x1, y1, x2, y2);
+  const cubicBezierTransition = getCubicBezierTransition(x1, y1, x2, y2);
 
   cubicBezierTransition.displayName = name;
   cubicBezierTransition.x1 = x1;

src/interpolate.js

@@ -4,6 +4,7 @@ import { Tweenable, composeEasingObject, tweenProps } from './tweenable';
 // skip uneccessary processing and object recreation, cutting down on garbage
 // collection pauses.
 const mockTweenable = new Tweenable();
+const { filters } = Tweenable;
 mockTweenable._filterArgs = [];
 
 /**
@@ -49,6 +50,14 @@ export const interpolate = (from, to, position, easing, delay = 0) => {
   const current = { ...from };
   const easingObject = composeEasingObject(from, easing);
 
+  mockTweenable._filters.length = 0;
+
+  for (const name in filters) {
+    if (filters[name].doesApply(from)) {
+      mockTweenable._filters.push(filters[name]);
+    }
+  }
+
   mockTweenable.set({});
   mockTweenable._filterArgs = [current, from, to, easingObject];
 

src/token.js

@@ -353,6 +353,9 @@ const collapseEasingObject = (easingObject, tokenData) => {
   }
 };
 
+export const doesApply = fromState =>
+  Object.keys(fromState).some(key => typeof fromState[key] === 'string');
+
 export function tweenCreated(currentState, fromState, toState) {
   [currentState, fromState, toState].forEach(sanitizeObjectForHexProps);