CSS3 Transitions and Transforms achieved through JavaScript.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
test
.babelrc
.gitignore
LICENSE
README.md
change-log.txt
gulpfile.js
jsdoc.json
package-lock.json
package.json

README.md

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