liens.md

Introduction: Pourquoi ce cours? Parcque 60fps

Google I/O

UI Elements at 60fps (Progressive Web App Summit 2016) https://youtu.be/ZqdNgn5Huqk

Animation CSS, JS se lance..;

Velocity

Simple, basique.

Tuto Grafikart https://www.youtube.com/watch?v=ltQ0p2qigNg&t=1414s Simple: Transition Group: https://codesandbox.io/s/oq0y3mrorz Demo: https://codesandbox.io/s/5K3yjOpq

Animation Wicked CSS

http://kristofferandreasen.github.io/wickedCSS/

Animations Burger Menus

Burger animé https://jonsuh.com/hamburgers/

ReactJS Parallax

Parallax demo https://codepen.io/andymerskin/pen/XNMWvQ/ React https://codesandbox.io/embed/r0yEkozrw?view=preview React Scroller: http://react-skrollr-demo.surge.sh/ React Map Image: http://parallax.egorov.pw/ React Parralax: https://codesandbox.io/s/r0yEkozrw

CSS Gradiant Animation

https://sarcadass.github.io/granim.js/examples.html

Load Image in Ajax

Beaucoup d'Image lourde ? http://react-lazy-hero.danielstefanovic.com/

Pressure.js

Mesurer la pression et animer en fonction

https://pressurejs.com/

Animations par Rebonds

Bounce.js http://bouncejs.com/

Animated Vivify

Form, Image, Action (CTA) http://vivify.mkcreative.cz/

Animated Shaked

https://elrumordelaluz.github.io/csshake/

Tuesday

Apparition - Appear - Disapear http://shakrmedia.github.io/tuesday/

Loader.css

https://connoratherton.com/loaders https://loading.io/css/ https://www.cssdesignawards.com/blog/excellent-css-svg-loaders/165/ https://samherbert.net/svg-loaders/ https://codepen.io/nikhil8krishnan/pen/rVoXJa

Animations avancées Twin (Hérité de Flash : Tween, TweenMax)

https://greensock.com/gsap

Motion by moks.cp

https://codepen.io/sdras/pen/67844da5ef9192c5378fffd0dccba28a https://codepen.io/anon/pen/ZRaZVZ?editors=1010 https://codepen.io/sdras/full/jVXQJR https://codesandbox.io/s/81kyzqrz2l Scenario Intro animation: https://codepen.io/sol0mka/full/OyzBXR Animated icons: https://tympanus.net/Development/Animocons/ Menu bubbles: https://codepen.io/sol0mka/full/yNOage Dialog Motion: https://codepen.io/sol0mka/full/812699ce32c9a7aeb70c9384b32a533a

Move to: Se deplacer en Smooth

https://hsnaydd.github.io/moveTo/demo/

Animation Cubic CSS

Bezier: http://cubic-bezier.com/#0,0,.58,1 Code: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_func_cubic-bezier Essai: https://matthewlein.com/tools/ceaser List:https://easings.net/fr

Examples: https://www.w3.org/Talks/2012/0416-CSS-WWW2012/slide-transitions.html

Technique (viellote avant le SVG) Animation Step by step by Sprite en Keyframes

http://jsfiddle.net/simurai/CGmCe/light/

React Animations

https://github.com/FormidableLabs/react-animations

Magic Animations: Entrée - Sortir du Cadre

https://minimamente.com/example/magic_animations/

Terrible librarie d'animation de groupe d'elements : AnimeJS

http://animejs.com/ https://alain.xyz/libraries/react-anime

React Animations

https://www.npmjs.com/package/react-animations https://codesandbox.io/s/r0KzgEVZk

React Anim avec Anime.js

https://codepen.io/collection/nrkjgo/ Lib: http://animejs.com/

React Transition Group

https://codesandbox.io/s/4w42ro2029 https://codesandbox.io/s/2vyw8xwl0 https://medium.com/lalilo/dynamic-transitions-with-react-router-and-react-transition-group-69ab795815c9 Demo: https://nicgirault.github.io/yellow

GreenSock GSAP

CheatSheet: https://ihatetomatoes.net/wp-content/uploads/2016/07/GreenSock-Cheatsheet-4.pdf

React Motion/Spring

Examples:

• Springs and interpolation: https://codesandbox.io/embed/oln44nx8xq
• Native springs: https://codesandbox.io/embed/882njxpz29
• Mount/Unmount transitions: https://codesandbox.io/embed/j150ykxrv
• Reveals: https://codesandbox.io/embed/yj52v5689
• Trails/Staggered motion: https://codesandbox.io/embed/vvmv6x01l5
• Horizontal paged parallax: https://codesandbox.io/embed/548lqnmk6l
• Vertical scrolled parallax: https://codesandbox.io/embed/0oonqxnpjl
• Time/duration https://codesandbox.io/embed/q9lozyymr9
• Keyframes/single script: https://codesandbox.io/embed/j1w4355593
• Keyframes/multiple scripts: https://codesandbox.io/embed/zl35mrkqmm
• Imperative Api: https://codesandbox.io/embed/3x350m0541
• Animating 'auto': https://codesandbox.io/embed/pmjomxn60
• SVG morphing/custom interpolaters: https://codesandbox.io/embed/lwpkp46om
• Morphing polygons: https://codesandbox.io/embed/9jj8py13l4
• VX/D3 stream graps: https://codesandbox.io/embed/py3p5p11m7
• VX/D3 area graphs: https://codesandbox.io/embed/j3x61vjz5v
• VX/D3 sunbursts: https://codesandbox.io/embed/nww6yxo0jl
• VX/D3 trees: https://codesandbox.io/embed/9jrjqvq954
• Routing: https://codesandbox.io/embed/mjnwrk1o3p
• Horizontal gestures / occlude: https://codesandbox.io/embed/jzn14k0ppy
• Vertical gestures / drag-n-drop: https://codesandbox.io/embed/l9zqz0m18z
• Animated TodoMVC: https://codesandbox.io/embed/2pk8l7n7kn