@nucliweb

Developer Advocate & Trainer Manager
at @SchibstedSpain

#Web #CSS #Javascript

#Animation #PostCSS

nucliweb.net

Joan León

Web Animations API

 Creando una animación

element.animate( keyframes, options )

WAAPI

 Keyframes { object }

let keyframes = {
    transform: ['none', 'scale(2)']
}

WAAPI Creando una animación

JS

 Keyframes [ array ]

let keyframes = [
    { transform: 'none' },
    { transform: 'scale(2)' }
]

WAAPI Creando una animación

JS

 Properties { object }

let properties = {
    duration: 3000,
    iterations: Infinity,
    direction: 'alternate',
    delay: 2000
}

WAAPI Creando una animación

JS

 Properties { object }

let properties = {
    delay: 0,
    direction: 'normal',
    duration: 0,
    easing: 'linear',
    endDelay: 0,         // No CSS version
    fill: 'none',
    iterationStart: 0,   // No CSS version
    iterations: 1
}

JS

WAAPI Creando una animación

 Animate

let animation = new Animation([effect][, timeline])

animation.pause()
animation.play()
animation.reverse()
animation.finish()
animation.cancel()

Methods

WAAPI Creando una animación

 Animate

animation.currentTime
animation.effect
animation.finished
animation.id
animation.playState
animation.playbackRate
animation.ready
animation.startTime
animation.timeline

Properties

WAAPI Creando una animación

animation.oncancel
animation.onfinish

Events

 Animate

animation.playbackRate = 0.5;

animation.playbackRate = 1;

animation.playbackRate = 2;

animation.playbackRate = 3;

Properties

WAAPI Creando una animación

 Animate

if ( synced ) {
  p2.currentTime = p.currentTime - (Math.random() * 700);
} else {
  p2.currentTime = p.currentTime;
}

WAAPI Creando una animación

Web Animations model

 Web Animations model

WAAPI

/web-animations-model/

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '100px'}
]

let options = {
  duration: 2000,
  iterations: 2,
  delay: 3000
}

let animation = element.animate(keyframes, options)

WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '100px'}
]

WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '75px'},
  { width: '100px'}
]

WAAPI

 Web Animations model

let keyframes = [
  { width: '50px'},
  { width: '75px'},
  { width: '85px'},
  { width: '100px'}
]

WAAPI

 Web Animations model

let keyframes = [
  { width: '50px', offset: 0},
  { width: '75px', offset: 0.75},
  { width: '85px', offset: 0.85},
  { width: '100px', offset: 1}
]

WAAPI

 Animaciones mútiples

WAAPI

let animated = document.querySelector('.toAnimate');
let pulseKeyframes,
    activateKeyframes,
    haveFunKeyframes;

let pulse = animated.animate(pulseKeyframes, 1000);
let activate = animated.animate(activateKeyframes, 3000);
let haveFunWithIt = animated.animate(haveFunKeyframes, 2500);

JS

 Animaciones mútiples

WAAPI

var a = document.querySelectorAll('div');
a = Array.prototype.slice.call(a);

a.forEach(function(el, i, ra) {
  var to = {
    x: Math.random() * (i % 2 === 0 ?-11 : 11),
    y: Math.random() * 12
  }
  
  el.animate([
    { transform: 'translate(0,0)' },
    { transform: 'translate('+to.x+'rem,'+to.y+'rem)' }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
  
  el.animate([
    { opacity: Math.random() },
    { opacity: Math.random() }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
  
  el.animate([
    { background: 'lightcoral' },
    { background: 'lightgreen' }
  ], {
    duration: (Math.random() + 1) * 2000,
    direction: 'alternate',
    fill: 'both',
    iterations: Infinity,
    easing: 'ease-in-out'
  });
});

 KeyframeEffect

WAAPI

let rabbitDownKeyframes = new KeyframeEffect(
    whiteRabbit, 
    [
      { transform: 'translateY(0%)' }, 
      { transform: 'translateY(100%)' }
    ], 
    { duration: 3000, fill: 'forwards' }
  )

let anim = new Animation(rabbitDownKeyframes, document.timeline)
anim.play()

 GroupEffects

WAAPI

let timings = {
  duration: 1000
}
let keyframes = [
  { opacity: 1 },
  { opacity: 0 }
]

let kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
]
let group = new GroupEffect(kEffects)
document.timeline.play(group)

Level 2

Polyfill

 SequenceEffects

WAAPI

var timings = {
  duration: 1000
}
var keyframes = [
  { opacity: 1 },
  { opacity: 0 }
]

var kEffects = [
  new KeyframeEffect(elem, keyframes, timings),
  new KeyframeEffect(elem2, keyframes, timings)
]
let sequence = new SequenceEffect(kEffects)
document.timeline.play(sequence)

Level 2

Polyfill

WAAPI vs CSS

 ¿Otra guerra JS contra CSS?

WAAPI vs CSS

CSS

JS

• Imperativo

• Declarativo

• Aceleración por Hardware

• Aceleración por Hardware

• timing-function: linear

• timing-function: ease

• Eventos e interacción

• Eventos e interacción

• Línea de tiempo global

• Línea de tiempo global

 ¿Otra guerra JS contra CSS?

WAAPI vs CSS

CSS

JS

.element.animated {
    animation: fadeOut 2s linear 0s 1 forwards;
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

element.addEventListener('click', (e) => {
	element.classList.toggle('animated')
})

 Otra alianza JS + CSS

WAAPI + CSS

CSS

WAAPI

Culturilla*

*ProTips

 Culturilla WAAPI

WAAPI

Easing

let keyframes = [
  { opacity: 0, easing: 'easing-in'},
  { opacity: 0, easing: 'easing-out'},
  { opacity: 1 }
]

let options = {
  duration: 1000,
  easing: 'ease-in-out'
}

 Culturilla WAAPI

WAAPI

Offset

let keyframes = [
  { offset: 0, opacity: 0, easing: 'easing-in'},
  { offset: 0.8, opacity: 0, easing: 'easing-out'},
  { offset: 1, opacity: 1 }
]

 Culturilla WAAPI

WAAPI

¿Ya podemos utilizar WAAPI?

web-animations-js

<!-- Include the polyfill -->
<script src="web-animations.min.js"></script>

<!-- Set up a target to animate -->
<div class="pulse" style="width: 150px;">Hello world!</div>

<!-- Animate! -->
<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>

/web-animations-js/

web-animations-js

Animación Reactiva

¿Animación Responsive?

Recursos

Motion Crafsmanship

Usa la animación para resolver problemas de diseño

by VAL HEAD

Usa la animación para resolver problemas de diseño