Animation

Using CSS3 transitions to do your animation is by far the best way, - you get better performance and less code. However the lack of support in older browsers makes the decision to use transitions less obvious. That is why the animation model of Manipulator is made to mimic the CSS3 transitions syntax, while providing fallback for older browsers.

Just add your transition, using the shorthand function and state your change. Declare a callback function to be notified when transition has ended.

Animation support for desktop_light browsers has been disabled because the development overhead exceeded the actual value. Animations are still supported in IE9.

Definition

Name: Util.Animation.transition
Syntax: Void = Util.Animation.transition( Node node, String transition Mixed custom_callback );

Description

Set CSS3 transition for node, with timer-based fallback for browsers with no CSS transition support. Declare node.transitioned to receive callback, when transition is done. Transitions and default callback are automatically removed when done.

The transition duration in milliseconds, is stored in node.duration.

Optionally pass a custom_callback parameter with a function reference or name of function to be invoked on node when transition is done.

Automatically adds vendor prefix (like Moz, webkit, ms or O).

Parameters

node: Node node to apply transition to
transition: String transition to apply to node
custom_callback: Mixed Optional custom function reference or name of function to be executed when transition is done.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	scene.transitioned = function() {
		// executed when the transition is done
	}

	u.a.transition(scene, "all 1s ease-in");
	u.a.translate(scene, 100, 100);
</script>

Set a "all 1s ease-in"-transition on div.scene and then moving it 100px down and 100px right. When transition is done the optional node.transitioned function is invoked.

Dependencies

JavaScript

try ... catch
String.match
parseFloat

Manipulator

Util.applyStyle
Util.Events.addEvent
Util.Animation.transitionEndEventName

Definition

Name: Util.Animation.translate
Syntax: Void = Util.Animation.translate( Node node, Integer x, Integer y );

Description

CSS3 translate node to new coordinates x,y.

Translation of nodes will be done with CSS3 when supported by browser, and fall back to absolute positioning. When using absolute positioning values will automatically be corrected to work on already absolute positioned nodes.

dependencies translate3d if browser supports it, because it is hardware accelerated by more browsers.

A translated node stores its translate values in node._x and node._y.

Parameters

node: Node node to translate
x: Integer x-coordinate to translate to.
y: Integer y-coordinate to translate to.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.translate(scene, 0, 100);
</script>

Translate div.scene to new coordinates, x=0px and y=100px.

Dependencies

JavaScript

none

Manipulator

Util.applyStyle
Util.Animation.support3d

Definition

Name: Util.Animation.rotate
Syntax: Void = Util.Animation.rotate( Node node, Integer deg );

Description

CSS3 rotate node to new angle.

Only supported in CSS3 capable browsers.

NO fallback to IE filters or likewise. The reasoning is as follows: Old browsers perform advanced tasks poorly, and filters tend to create havoc in conjunction with standards, such as webfonts. If you want to use filters, do so specifically - in your own code.

A rotated node, stores its rotate angle in node._rotation.

Parameters

node: Node node to rotate
deg: Integer degrees to rotate node to.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.rotate(scene, 100);
</script>

Rotate div.scene 100 degrees clockwise.

Dependencies

JavaScript

none

Manipulator

Util.applyStyle

Definition

Name: Util.Animation.scale
Syntax: Void = Util.Animation.scale( Node node, Number scale );

Description

CSS3 scale node to new dimension.

Only supported in CSS3 capable browsers.

A scaled node, stores its current scaling in node._scale.

Parameters

node: Node node to translate
scale: Number value to scale node to.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.scale(scene, 0.5);
</script>

Scale scene to half size.

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.scale(scene, 2);
</script>

Scale div.scene to double size.

Dependencies

JavaScript

none

Manipulator

Util.applyStyle

Definition

Name: Util.Animation.opacity
Syntax: Boolean = Util.Animation.opacity( Node node, Number opacity );

Description

Set opacity for node.

Setting opacity of nodes will be done with CSS3 when supported by browser, and fall back to setting visibility (visible/hidden) in older browsers. NO fallback to IE filters, due to webfont incompatibility.

A node with opacity, stores its current opacity value in node._opacity.

Parameters

node: Node node to set opacity on
opacity: Number new opacity (0-1).

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.opacity(scene, 0.5);
</script>

Make div.scene semi-transparent.

Dependencies

JavaScript

none

Manipulator

Util.applyStyle

Definition

Name: Util.Animation.width
Syntax: Void = Util.Animation.width( Node node, Integer width );

Description

Set width of node, and handle fallback timer-based transition if required.

Stores latest width in node._width.

Parameters

node: Node node to set width on.
width: Integer new width of node.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.width(scene, 200);
</script>

Set width of div.scene to 200px.

Dependencies

JavaScript

none

Manipulator

Util.applyStyle

Definition

Name: Util.Animation.height
Syntax: Void = Util.Animation.height( Node node, Integer height );

Description

Set height of node, and handle fallback timer-based transition if required.

Stores latest height in node._height.

Parameters

node: Node node to set height on
height: Integer new height of node.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.height(scene, 200);
</script>

Set height of div.scene to 200px.

Dependencies

JavaScript

none

Manipulator

Util.Animation.vendor

Definition

Name: Util.Animation.bgPos
Syntax: Void = Util.Animation.bgPos( Node node, Integer x Integer y );

Description

Set background-position of node, and handle fallback timer-based transition if required.

Stores latest background-position in node._bg_x and node._bg_y.

Parameters

node: Node node change background-position on
x: Integer new x-coordinate of background.
y: Integer new y-coordinate of background.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.bgPos(scene, 200, 200);
</script>

Set background-position: 200px 200px; on div.scene

Dependencies

JavaScript

none

Manipulator

Util.Animation.vendor

Definition

Name: Util.Animation.bgColor
Syntax: Void = Util.Animation.bgColor( Node node, String color );

Description

Set background-color of node, and handle fallback timer-based transition if required.

Stores latest background-color in node._bg_color.

Parameters

node: Node node to change background-color of
color: String new HEX background-color of node.

Return values

Void

Examples

<div class="scene"></div>

<script>
	var scene = u.querySelector(".scene");
	u.a.bgColor(scene, #0000ff);
</script>

Set background-color: #0000ff; on div.scene

Dependencies

JavaScript

none

Manipulator

Util.Animation.vendor

Definition

Name: Util.Animation.support3d
Shorthand: u.a.support3d
Syntax: Boolean = Util.Animation.support3d();

Description

Check for CSS3 3D-translation support. 3D-translation is hardware accelerated in more browsers, so it makes a good choice even for 2D-translations. The u.a.translate function of this library automatically dependencies 3D-translations if available.

Parameters

No parameters

Return values

Boolean Whether the browser supports CSS3 3D translations.

Examples

No examples

Dependencies

JavaScript

document.removeChild
try ... catch
String.match

Manipulator

Util.getComputedStyle
Util.appendElement
Util.applyStyle

Main file

u-animation.js

Segment support files

u-animation-desktop_ie9.js

desktop_edge: u-animation.js + u-events.js + u-math.js
desktop_ie11: u-animation.js + u-events.js + u-math.js
desktop: u-animation.js + u-events.js + u-math.js
desktop_ie10: u-animation.js + u-events.js + u-math.js
desktop_ie9: u-animation.js + u-animation-desktop_ie9.js + u-events.js + u-geometry.js + u-dom.js + u-dom-desktop_ie.js + u-math.js
desktop_light: not supported
tablet: u-animation.js + u-events.js + u-math.js
tablet_light: u-animation.js + u-events.js + u-math.js
smartphone: u-animation.js + u-events.js + u-math.js
mobile: not tested
mobile_light: not supported
tv: not tested
seo: not supported

Animation

Functions

Util.Animation.transition

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.translate

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.rotate

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.scale

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.opacity

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.width

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.height

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.bgPos

Definition

Description

Parameters

Return values

Examples

Dependencies

JavaScript

Manipulator

Util.Animation.bgColor

Definition

Description

Parameters

Return values

Examples