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