shiftjs

Shift.js

CSS3 Transitions and Transforms achieved through JavaScript.

Full documentation and examples: https://shiftjs.drzwebdev.com/

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
});