Let's talk

Web Animations API

@lisi_linhart

Created by anbileru adaleru from the Noun Project

Wann ist

Unterhaltung?

mehr als

Animation

Zwecke einer Animation

  • Transitions

  • Ergänzende Animationen

  • Feedback

  • Demonstration

  • Dekoration

5

Animation at Work

Rachel Nabors

Transitions

npm install wifi

Ergänzende Animationen

npm install wifi

Feedback

npm install wifi

Demonstration

npm install wifi

Dekoration

npm install wifi

Zwecke einer Animation

  • Transitions

  • Ergänzende Animationen

  • Feedback

  • Demonstration

  • Dekoration

5

Animation at Work

Rachel Nabors

Kosten einer Animation

Animation at Work

Rachel Nabors

Web

Animations

API

.circle {
    width: 200px;
    height: 200px;
    background: teal;
    
    transform: scale(0.2); 
}

.circle.animated {
    animation: scaleUpAndFade 2s linear 0s 1 forwards;
}

@keyframes scaleUpAndFade {
    from {
        opacity: 1;
        transform: scale(0.2);
    }
    to {
        opacity: 0;
        transform: scale(1);
    }
}

CSS

Animation

const circle = document.querySelector(".circle");

circle.addEventListener('click', (e) => {
	circle.classList.toggle('animated');																								 
});
.circle {
    width: 200px;
    height: 200px;
    background: teal;
    
    transform: scale(0.2); 
}

WAAPI

Animation 

const circle = document.querySelector(".circle");

circle.addEventListener('click', (e) => {

  circle.animate([
    { transform: 'scale(0.2)', opacity: 1 },
    { transform: 'scale(1)', opacity: 0 },
  ], {
    duration: 2000, 
    easing: 'linear', 
    iterations: 1, 
    direction: 'normal', 
    fill: 'forwards' 
  });	
																		 
});

.animate() 

// element.animate(keyframes, options); 
const animation = document.querySelector(".apple").animate(
  [
    { transform: 'translateY(0%)', easing: 'ease-in', offset: 0 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: .33 },
    { transform: 'translateY(420%)', easing: 'ease-in', offset: .5 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: .66 },
    { transform: 'translateY(460%)', easing: 'ease-in', offset: .82 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: .92 },
    { transform: 'translateY(480%)', easing: 'ease-in', offset: .97 },
    { transform: 'translateY(500%)', easing: 'ease-out', offset: 1 },
  ], 
  {
    duration: 2000, // milliseconds
    iterations: 1, // or Infinity
    direction: 'normal', // 'alternate', 'reverse', 'alternate-reverse'
    fill: 'forwards', // 'backwards', 'both', 'none', 'auto'
    delay: 0, // milliseconds
    endDelay: 0, // milliseconds
    easing: 'linear', // 'ease', 'ease-in-out', 'ease-in', ...
  }
);
tree.addEventListener('click', () => {
    animation.currentTime = 0;
    animation.play();
});
apple.addEventListener('click', () => {
    animation.playbackRate += 0.2;
});

controls & callbacks

const animation = element.animate(/* animation */);
console.log(animation.playState); //"running"

animation.pause(); //"paused"
animation.play();  //"running"
animation.cancel(); //"idle"... jump to original state
animation.finish(); //"finished"...jump to end state
animation.reverse(); // play animation in reverse

animation.playbackRate = 1.5; // play faster
const animation = element.animate(/* animation */);

animation.onfinish = function() {
  console.log("Animation finished");
};

animation.oncancel = animation.effect.target.remove();

CSS

vs

WAAPI

CSS

WAAPI

CSS

WAAPI

if (window.matchMedia('(prefers-reduced-motion)')) {
    document.getAnimations().forEach( // get all animations
        (animation) => animation.cancel(); // cancel them
    ); 
}

:root {
    --duration: 0.8;

    @media (prefers-reduced-motion: reduce) {
        --duration: 0;
    }
}

.element {
    animation: fadeOut calc(var(--duration) * 1s) linear;
}

A11y

Ist die

WAAPI

die Lösung

aller

Animationsprobleme?

Cross-Browser-Kompatibilität & SVG

Browser Renderer & DOM

native Animation vs externe Library

Basis für Browser

WAAPI vs GSAP

In

Zukunft

  •  GroupEffect & SequenceEffect
  • setKeyframes
  • motion path
  • mehrere Timelines
  • Level 2 noch interessantere Features

Browser

Support

Polyfill

Web Platform Tests

Dankeschön!

@lisi_linhart

slides.com/lisilinhart/waapi/

codepen.io/lisilinhart/collections/

Web Animations API

By Lisi Linhart

Made with Slides.com

Web Animations API

An intro to the Web Animations API

  • 464

More from Lisi Linhart