Skip to content

Instantly share code, notes, and snippets.

@Symfomany

Symfomany/liens.md

Last active June 19, 2018 18:09
Show Gist options
  • Save Symfomany/caae43a3d669707ef856bc2f84a1e31b to your computer and use it in GitHub Desktop.
Save Symfomany/caae43a3d669707ef856bc2f84a1e31b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
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:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment