Shift.js
(!) NOTE: I have decided to pursue other projects and no longer actively maintain this repository.
CSS3 Transitions and Transforms achieved through JavaScript.
npm install shiftjs Browser Support:
- Chrome 31+
- Firefox 34+
- Edge 13+
- IE10+
- Safari 7.1+
- Opera 26+
- Mobile
In older browsers, some transform-based animations will not work if the browser does not natively support the feature. All other CSS changes will be applied normally albeit without a smooth CSS3 transition.
Documentation/Examples
Initialization
Either method below will suffice...
shift(selector [, context]); var el = new Shift(selector [, context]); animate()
Transition several properties at once.
shift(selector).animate({ prop1: 'value1', prop2: 'value2', prop3: 'value3' }), duration, easing, complete); fadeOut()
Fades-out a DOM element.
shift(selector).fadeOut(duration, easing, complete); fadeIn()
Fades-in a DOM element.
shift(selector).fadeIn(duration, easing, complete); rotate()
Defines a 2d rotation.
shift(selector).rotate(degrees, duration, easing, complete); rotateX()
Defines a rotation along the X axis.
shift(selector).rotateX(degrees, duration, easing, complete); rotateY()
Defines a rotation along the Y axis.
shift(selector).rotateY(degrees, duration, easing, complete); scale()
Scales a DOM element. (proportional or non-proportional)
shift(selector).scale(number, duration, easing, complete); => proportional shift(selector).scale([x, y], duration, easing, complete); => non-proportional scaleX()
Scales a DOM element's X value.
shift(selector).scaleX(number, duration, easing, complete); scaleY()
Scales a DOM element's Y value.
shift(selector).scaleY(number, duration, easing, complete); set()
Defines a transition: unlike animate(), this method transitions one property at a time.
shift(selector).set(property, value, duration, easing, complete); skew()
Skews a DOM element. (proportional or non-proportional)
shift(selector).skew(number, duration, easing, complete); => proportional shift(selector).skew([x, y], duration, easing, complete); => non-proportional skewX()
Skews a DOM element's X value.
shift(selector).skewX(number, duration, easing, complete); skewY()
Skew's a DOM element's Y value.
shift(selector).skewY(number, duration, easing, complete); translate()
Defines a translation along the X and Y axis.
shift(selector).translate(number, duration, easing, complete); => X === Y shift(selector).translate([x, y], duration, easing, complete); => X !== Y translateX()
Defines a translation along the X axis.
shift(selector).translateX(number, duration, easing, complete); translateY()
Defines a translation along the Y axis.
shift(selector).translateY(number, duration, easing, complete); delay()
Applies a transition-delay to the current animation. If the number argument is omitted, the default delay value is "0.5".
shift(selector).fadeOut().delay(number); => in seconds origin()
Alters the transform-origin of the current transform animation. The default transform-origin is "50%, 50%".
shift(selector).rotate(number).origin(number, number); => each number argument for origin() is the X and Y percentage value, respectively Acceptable "easing" Values
Default easing value is "ease"...
- "in"
- "out"
- "in-out"
- "linear"
- "snap"
- Custom - example below
shift(selector).fadeOut(duration, [0, 1, 0.5, 0]); => the easing array will be converted to a cubic-bezier curve Notes on "duration"
The duration parameter is always in seconds, not in milliseconds. If omitted, the default value is 0.5.
shift(selector).fadeOut(); => defaults to 0.5-second transition shift(selector).fadeOut(2); => 2-second transition Notes on "complete"
The complete parameter comes in handy for more involved sequential animations. This parameter triggers a callback on transitionend.
shift(selector).set(property, value, duration, easing, function() { // do stuff here }); Documentation
For documentation and examples, please refer to the website or run the following command:
gulp jsdoc 
