What is Shift.js?

Butter-Smooth Transitions and Transforms

Shift.js is a JavaScript library which utilizes the modern web browser's native CSS3 transition and transform protocol. All animations are performant and executed with little browser overhead. This library is not dependent on jQuery or any other library.

Making Animations Easier

With Shift.js, developers may trigger CSS3 transitions and transforms without the need for complex and bloated stylesheets. This library leverages familiar JavaScript syntax and method chaining, making it easy to transition/transform DOM elements as you see fit.

Shift.js Documentation

Initialization

Initializing Shift.js is easy: shift(target); or, alternatively, var myShift = new Shift(target); Either method will suffice.

Shift.js utilizes "querySelectorAll" and thus supports IDs, classNames, tagNames and offers you the ability to target selectors within a given context, e.g. shift(target [, context]);

Shift.js includes several built-in methods to make your life easier: Hover over each example below to see it in action.

animate()

   shift('.square').animate({width: '50%', top: '60px', background: '#0f0'});		
				

fadeOut()

   shift('.square').fadeOut();		
				

fadeIn()

   shift('.square').fadeIn();		
				

rotate()

   shift('.square').rotate(130);		
				

rotateX()

   shift('.square').rotateX(180);		
				

rotateY()

   shift('.square').rotateY(180);		
				

scale()

   shift('.square').scale(2);		
				

scaleX()

   shift('.square').scaleX(2);		
				

scaleY()

   shift('.square').scaleY(2);		
				

set()

   shift('.square').set("width", "72%");		
				

skew()

   shift('.square').skew([20, 30]);		
				

skewX()

   shift('.square').skewX(40);		
				

skewY()

   shift('.square').skewY(40);		
				

translate()

   shift('.square').translate(['180px', '50px']);		
				

translateX()

   shift('.square').translateX('180px');		
				

translateY()

   shift('.square').translateY('50px');		
				

Some Notes

  • The set() and animate() methods both provide a smooth transition on valid, transitionable CSS properties... The difference is that animate() accepts an object as its primary argument and transitions several user-defined properties at once, whereas set() transitions one property at a time: animate({prop1: 'value1', prop2: 'value2'}); vs. set('property', 'value');
  • scale() and skew(): You may enter an array of 2 numbers as the primary argument if defining different X and Y values, or you may simply enter a number as the primary argument if the X and Y values for your transition are the same. In other words, scale([2.2, 2.2]); === scale(2.2);
  • translate(): You may enter an array of 2 strings as the primary argument if defining different X and Y values (accepts "px" and "%" values), or you may simply enter a string as the primary argument if the X and Y values for your transition are the same. In other words, translate(['50%', '50%']); === translate('50%');
  • Unless using the animate() or set() methods for transform-based animations, all degree, pixel and zoom units will be taken care of automatically and do not need to be entered manually.
  • fadeOut() and fadeIn() work solely on the opacity property. Unlike jQuery fadeOut/fadeIn, the display property of your target DOM elements will not be affected.

Duration Parameter

After inputting the primary property/value parameter of each method, you may input a duration parameter in seconds. If omitted or null, the default duration value is "0.5".

Example: 0.6 Seconds

   shift('.square').set('width', '72%', 0.6);		
				

Example: 2 Seconds

   shift('.square').set('width', '72%', 2);		
				

Easing Parameter

After inputting the duration parameter, you may input an easing parameter. Acceptable easing values include "in", "out", "in-out", "linear", and "snap". Each value is to be input as a string. If omitted or null, the default value is "ease".

To define custom easing, simply input an array of four numbers: this array will be converted to a cubic-bezier curve.

"in"

   shift('.square').translateX('180px', 0.6, 'in');		
				

"out"

   shift('.square').translateX('180px', 0.6, 'out');		
				

"in-out"

   shift('.square').translateX('180px', 0.6, 'in-out');		
				

"linear"

   shift('.square').translateX('180px', 0.6, 'linear');		
				

"snap"

   shift('.square').translateX('180px', 0.6, 'snap');		
				

Custom

   shift('.square').translateX('180px', 0.6, [0, 1, 1, 0]);		
				

Complete Parameter

After inputting your duration and easing parameters, you have the option to pass a final argument into each method which will trigger a callback on "transitionend".

The complete parameter is particularly useful for more involved sequential animations. For instance, if "func" below is a function that changes the background-color of ".square" to green...

Example...

   shift('.square').translateX('180px', 0.6, 'in-out', func);		
				

...and another example.

   shift('.square').set('width', '72%', 0.6, 'in-out', func);		
				

Delay Method

You have the option to set a transition-delay by calling the delay() method. This method takes just one argument: seconds. If omitted, the default delay value is "0.5".

Half-Second Delay

   shift('.square').translateX('180px').delay();		
				

1-Second Delay

   shift('.square').translateX('180px').delay(1);		
				

Origin Method

The default transform-origin for Shift.js transforms is "50%, 50%", though you may override this by calling the origin() method. origin() accepts two arguments: X and Y, both numbers.

X === Y

   shift('.square').scale(2.2).origin(0, 0);		
				

X !== Y

   shift('.square').rotate(-110).origin(98, 2);