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.

Functions

Util.Animation.transition

Definition

Name
Util.Animation.transition
Syntax
Void = Util.Animation.transition( Node node, String transition Mixed 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 declared callback functions) are automatically removed when done.

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

Pass a callback parameter with a function reference or name of function to be invoked 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
callback
Mixed Optional function reference or name of function to be executed when transition is done

Returns

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.

Uses

JavaScript
  • try ... catch
  • String.match
  • parseFloat
Manipulator
  • Util.applyStyle
  • Util.Events.addEvent
  • Util.Animation.transitionEndEventName

Util.Animation.translate

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.

Uses 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.

Returns

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.

Uses

JavaScript

none

Manipulator
  • Util.applyStyle
  • Util.Animation.support3d

Util.Animation.rotate

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.

Returns

Void

Examples

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

Rotate div.scene 100 degrees clockwise.

Uses

JavaScript

none

Manipulator
  • Util.applyStyle

Util.Animation.scale

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.

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 scaled node, stores its current scaling in node._scale.

Parameters

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

Returns

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.

Uses

JavaScript

none

Manipulator
  • Util.applyStyle

Util.Animation.opacity

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).

Returns

Void

Examples

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

Make div.scene semi-transparent.

Uses

JavaScript

none

Manipulator
  • Util.applyStyle

Util.Animation.width

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.

Returns

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.

Uses

JavaScript

none

Manipulator
  • Util.applyStyle

Util.Animation.height

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.

Returns

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.

Uses

JavaScript

none

Manipulator
  • Util.Animation.vendor

Util.Animation.bgPos

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.

Returns

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

Uses

JavaScript

none

Manipulator
  • Util.Animation.vendor

Util.Animation.bgColor

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.

Returns

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

Uses

JavaScript

none

Manipulator
  • Util.Animation.vendor

Util.Animation.support3d

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 uses 3D-translations if available.

Parameters

No parameters

Returns

Boolean Whether the browser supports CSS3 3D translations.

Examples

No examples

Uses

JavaScript
  • document.removeChild
  • try ... catch
  • String.match
Manipulator
  • Util.getComputedStyle
  • Util.appendElement
  • Util.applyStyle

Files

Main file

  • u-animation.js

Segment support files

  • u-animation-desktop_ie9.js

Segment dependencies

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_ie10.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