proyecto26/web-animations-workshop

Workshop of Web Animations API and Web Components

Workshop of Web Animations and Web Components

Web Animations

• Support: https://caniuse.com/#feat=web-animation
• Web Animations API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
  • Check properties you can use: https://www.w3schools.com/css/css3_animations.asp
  • Additive animation: https://css-tricks.com/additive-animation-web-animations-api/
• Easing Functions: https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function
  • Browse: https://easings.net
• Examples:
  • The illusion of life => https://codepen.io/jeroens/post/the-illusion-of-life
    • Disney: https://www.youtube.com/watch?v=a6Ts93tsTZU
  • Squash and Stretch (CSS) => https://codepen.io/bigsweater/pen/YWopYR
  • Animation Principles for the Web => https://codepen.io/collection/AxKOdY/
  • Animations Feel More Natural => https://css-tricks.com/making-css-animations-feel-natural/
  • Background position for sprites => https://codepen.io/rachelnabors/pen/zxYexJ/
  • Parallax => https://codepen.io/rachelnabors/pen/AvGhp
  • Game => https://codepen.io/rachelnabors/details/PNYGZQ
  • Spinners => https://codepen.io/rachelnabors/pen/pefly?editors=0110
  • Scroll Effects => https://codepen.io/rachelnabors/pen/NgyjZm?editors=1010

Web Components

• Support: https://custom-elements-everywhere.com/
• Stencil: https://stenciljs.com/

Web Animations API (WAAPI)

1. Create or Extract Key Frames from:

• https://cssanimate.com/
• https://animista.net/
• http://bouncejs.com/
• https://angrytools.com/css/animation/
• Tool to convert CSS Keyframes to JS: https://github.com/gibbok/keyframes-tool

2. Debug the keyFrames here: https://codepen.io/jdnichollsc/pen/MWwpGNW?editors=0010

Web Components

1. Clone the repository https://github.com/proyecto26/animatable-component

2. Create a new file from animations folder, e.g: https://github.com/proyecto26/animatable-component/blob/master/src/animations/lightspeed.ts

3. Define and Export the keyFrames

4. Debug by running the command npm start

Nice to Try

• GSAP => https://greensock.com/waapi/
• Effects => http://danielcwilson.com/blog/2015/09/animations-part-4/
• Motion Paths => https://codepen.io/collection/AQWaem/

Supporting 🍻

I believe in Unicorns 🦄 Support me, if you do too.

Donate Ethereum, ADA, BNB, SHIBA, USDT, DOGE:

Wallet address: 0x3F9fA8021B43ACe578C2352861Cf335449F33427

Please let us know your contributions! 🙏

Happy coding 💯

Made with ❤️