Animations
Create and edit SMIL animations
This category contains 14 showcases
Play all Animations showcases continuously
Animate DOM attributes and style properties of elements
Animate a closed quadratic arc with three drawn states (c,c1,c2)
Animate a closed quadratic arc with three drawn states (c,c1,c2).
Use keyTimes to increase the pressure and slow down expansion and return to original state.
Animate an element with translate, rotate, scale, skew transformations
Animate attribute values with spline interpolation
Animate using keyTimes with multiple values to control the transition speed of each value
Animate a wave path with drawn states.
Each path structure must be the same.
Draw each wave curve state by copy and move each control point.
Move each curve to the same starting point.
Animate the wave path with each curve.
The following modifications on the curves are replicated on the animation by a constraint.
Describes the schedule of animations with their sequences.
Shows how to define the origin of a motion animation.
Define the motion origin point on the target.
Select the moving method (transform or animate).
Shows how to define the motion path of a target using the three methods (refers, copy, describe).
The motion path can be defined with a geometric element of any type (rectangle, circle, ellipse. path).
Animations are updated by constraints when motion path changes.
Animations properties can be edited.
When the motion target is transformed, the animation should be
applied to an enclosing group of the target.
Animate motion using keyTimes/keySplines to set speed along the path with spline interpolation to accelerate and decelerate.
A demonstration with ski jumping
Synchronize animations by events (begin, end, click, hyperlink, ..)
Using the set command to fix elements state during animations