React Motion

- front-end animations done right -

 

WelshDesign #7 - 24/03/2016

          @zoontek

  • Développeur chez Colisweb
  • Ruby, Javascript (React Native)
  • Essaye d'apprendre le Scala

“​ Les animations en JS, c'est quand même moins performant que les animations en CSS ”

– Un développeur resté enfermé dans une cave

(ou qui utilise encore jQuery < 3.0)

setInterval()

requestAnimationFrame()

  • Optimisable par le browser et donc + fluide
  • En pause dans les onglets inactifs
  • Soulage la batterie de votre laptop

$(el).addClass('transformThing')

el.classList.add('transformThing')

Franchement ?

#el

Impossible de tenir compte de la vitesse et de la résistance pour modifier le parcours

  • Easing, Tweening
  • Valeurs relatives
  • Aucune notion de temps
  • Une notion de progression
  • Ne repose pas sur le DOM
  • Compatible React Native

Une API minimaliste

 

“​ For 95% of use-cases of animating components, we don't have to resort to using hard-coded easing curves and duration. Set up a stiffness and damping for your UI element, and let the magic of physics take care of the rest. ”

spring
presets
Motion
StaggeredMotion
TransitionMotion

Demo time

Pour creuser un peu plus…

Merci de votre attention. Des questions ?


Tout de suite ? Il suffit de lever la main
Plus tard ? Suis moi sur twitter: @zoontek

React Motion

By Mathieu Acthernoene

React Motion

  • 2,247