An Introduction
Presented by
David Khourshid
@davidkpiano
"No." - Sent from my iPhone
Provided a standard for interactive web animations
Good for games and videos
...and literally every restaurant website
Web Animations defines a model for supporting animation and synchronization on the Web platform.
CSS3 Transitions
CSS3 Animations
SVG SMIL Animations
JS requestAnimationFrame()
Basic Usage
var ujsElement = document.querySelector('#UniversityJavaScript');
var ujsPlayer = ujsElement.animate(
// Keyframe Effect
[
{ opacity: 0, transform: 'scale(1.2) rotate(35deg)' },
{ opacity: 1, transform: 'scale(1) rotate(0)' },
{ opacity: 0, transform: 'scale(0.8) rotate(-35deg)' }
],
// Timing Object
{
duration: 1000, // milliseconds
iterations: Infinity
});
// No need to play() -- it's already playing!
via constructor
var ujsElement = document.querySelector('#UniversityJavaScript');
var ujsAnimation = new Animation(
// Target animatable element
ujsElement,
// Keyframe Effect
[
{ opacity: 0, transform: 'scale(1.2) rotate(35deg)' },
{ opacity: 1, transform: 'scale(1) rotate(0)' },
{ opacity: 0, transform: 'scale(0.8) rotate(-35deg)' }
],
// Timing Object
{
duration: 1000, // milliseconds
iterations: Infinity
});
// Play the animation
document.timeline.play(ujsAnimation);
Animations apply a custom animation effect to an animatable element, or target.
var ujsElements = document.querySelectorAll('.university-javascript-item');
var ujsAnimation = new AnimationGroup(
// Array of Animation Nodes
[
new Animation(ujsElements[0], [...], {...}),
new Animation(ujsElements[1], [...], {...}),
new Animation(ujsElements[2], [...], {...})
],
// Timing object
{
duration: 1000,
iterations: 4
}
]);
document.timeline.play(ujsAnimation);
Animation Groups contain a group of ordered animation nodes which are played simultaneously.
This means that animations can be hierarchical!
var ujsElements = document.querySelectorAll('.university-javascript-item');
var ujsAnimation = new AnimationSequence(
// Array of Animation Nodes
[
new Animation(ujsElements[0], [...], {...}),
new Animation(ujsElements[1], [...], {...}),
new Animation(ujsElements[2], [...], {...})
],
// Timing object
{
duration: 1000,
iterations: 4
}
]);
document.timeline.play(ujsAnimation);
Animation Sequences are like animation groups, except that child animation nodes are played sequentially; i.e. right after each other.
var ujsElements = document.querySelectorAll('.university-javascript-item');
var ujsAnimation = new AnimationGroup(
// Array of Animation Nodes
[
new Animation(ujsElements[0], [...], {...}),
new Animation(ujsElements[1], [...], {...}),
new AnimationSequence(
// Array of Animation Nodes
[
new Animation(ujsElements[2], [...], {...}),
new Animation(ujsElements[3], [...], {...})
]
)
],
// Timing object
{
duration: 1000,
iterations: 4
}
]);
document.timeline.play(ujsAnimation);