Class: AnimationWidget

Movement Examples

Simple Movement Animation

The following example shows a simple movement animation that begins at the top left of the scene and animates into the center when the page becomes on screen. In-line styles are used for clarity, stylesheets are recommended.

id Optional

A unique id for the HTML element.

data-widget="ANIMATION" Required

Animation widget identifier.

data-end-x="312px" Required

Final x position

data-end-y="174px" Required

Final y position

data-onscreen="true" Required

Fires when brought on screen

<!-- Moves to the center of the screen -->
<div id="example_id"
     style="left:0px; top:0px; width:400px; height:400px;"
     data-widget="ANIMATION"
     data-end-x="312px"
     data-end-y="174px"
     data-onscreen="true" >
  <img src="animation_image" />
</div>

Rolling Ball Animation

The following example shows slightly more complex movement, incorporating movement with rotation. Note that this animation just moves sideways across the page so data-end-y is omitted because it is not required. Also of note is that the rotation is set to 720 meaning that this ball animation will rotate the ball twice over the course of it’s movement.

In-line styles are used for clarity, stylesheets are recommended.

data-end-x="600px" Required

Final x position

data-end-rotation="720" Required

Rotates the animation

<!-- Rotation and horizontal movement -->
<div id="example_id" style="left:100px; top:0px; width:400px; height:400px;"
     data-widget="ANIMATION" data-end-x="600px" data-end-rotation="720" >
  <img src="ball_img" />
</div>

Opacity Examples

Fade In Animation

The following example shows an animation that fades in to 90% opacity (0.9) on response to a button. User-interaction is set to false so that the animatio is only triggered via the button. Note that using the data-hide-before parameter to achieve this will result in different behaviour, likely it will be behaviour you don’t want. See the next example for a hidden widget example.

In-line styles are used for clarity, stylesheets are recommended.

data-end-opacity="100" Required

Final opacity

data-user-interaction="false" Required

Remove user interaction

<!-- Fade in via a button -->
<div id="example_id" style="left:100px; top:0px; width:400px; height:400px; opacity: 0;"
     data-widget="ANIMATION" data-end-opacity="90" data-user-interaction="false" >
  <img src="animation_img" />
</div>
<div id="button_id" data-widget="BUTTON" data-target="example_id" data-action="PLAY_ANIMATION">
  <img src="button_img" /><span>Click Me</span>
</div>

Crouching Tiger Hidden Animation

The following example shows an animation that is hidden before it starts. It also has a delay before it starts. The use-case here is that the background of the page contains an image which then starts to animate after 2 seconds, during those 2 seconds the animation should not be actionable but after the animation has begun a user may interact with it. By hiding the widget before it starts animating the animation is kept hidden until it is ready for action.

In-line styles are used for clarity, stylesheets are recommended.

data-end-scale-x="200" Required

Double horizontal size

data-end-scale-y="200" Required

Double vertical size

data-delay="2000" Required

Delay start by 2 seconds

data-hide-before="true" Required

Hide the animation before it begins

<!-- Hidden Animation Example -->
<div id="example_id" style="left:100px; top:0px; width:400px; height:400px;"
     data-widget="ANIMATION"
     data-end-scale-x="200"
     data-end-scale-y="200"
     data-delay="2000"
     data-hide-before="true" >
  <img src="animation_img" />
</div>

Timing Function Examples

Ease-out Animation

The following example shows an animation that uses the CSS3 preset transition timing function of ease-out. An ease-out animation comes to rest more slowly to it’s final state than the default linear transition. The best way to get a grip on timing functions is to simply try out a few different options and see which fits the effect you’re after.

data-timing-function="ease-out" Required

The timing function of the animation

<!-- Ease-out Example -->
<div id="example_id" style="left:100px; top:0px; width:400px; height:400px;"
     data-widget="ANIMATION" data-timing-function="ease-out" data-end-x="600px" data-end-y="400px" >
  <img src="animation_img" />
</div>

Cubic-bezier Timing Curve

If you’re not happy with the standard timing curve presets such as linear or ease-in-out then you can specify your own cubic bezier curve to time your animation. The full specification of defining a bezier curve is beyond the scope here but the cubic bezier function takes 4 parameters between 0 and 1 which define a pair of 2D vectors that define curved line between 2 points.

The curve descibed here is similar to a more extreme version of ease-out.

data-timing-function="cubic-bezier(1.000,0.423,0.250,1.000)" Required

The timing function of the animation

<!-- Defined Cubic-bezier Example -->
<div id="example_id" style="left:100px; top:0px; width:400px; height:400px;"
     data-widget="ANIMATION" data-timing-function="cubic-bezier(1.000,0.423,0.250,1.000)" data-end-x="600px" data-end-y="400px" >
  <img src="animation_img" />
</div>

Loop Examples

Loops Forever

The following example shows an animation that loops. As data-count is not specified it defaults to a value of 0 and is interpreted by making the animation loop indefinitely.

data-loop="true" Required

Start looping

<!-- Ease-out Example -->
<div id="example_id" style="left:100px; top:100px; width:400px; height:400px;"
     data-widget="ANIMATION" data-loop="true" data-end-rotation="360" >
  <img src="animation_img" />
</div>

Warning - Anti-Widget Ahead!

! This widget will not work as you may expect !

Although the widget below looks like it should loop twice and then stop, the data-loop parameter is not specified and defaults to false meaning that the animation will not start looping in the first place. To fix this add data-loop='true' to the example HTML below.

data-count="2" Required

Does not oop twice (see description)

<!-- Warning - This widget does not work as expected -->
<div id="example_id" style="left:100px; top:0px; width:400px; height:400px; opacity: 0;"
     data-widget="ANIMATION" data-count="2" data-end-x="600px" data-end-y="400px" >
  <img src="animation_img" />
</div>