web-animations-api

There are 3 repositories under web-animations-api topic.

• wellyshen / use-web-animations

  😎 🍿 React hook for highly-performant and manipulable animations using Web Animations API.

  animationhookinteractionmotionperformanceplayback-controlreacttransitiontypescriptuse-web-animationsuxwaapiweb-animationsweb-animations-api
  Language:TypeScript 1259

• gibbok / animatelo

  Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

  animationcross-browser-animationsjavascriptweb-animations-apicssanimations
  Language:JavaScript 487

• johakr / html5-slot-machine

  Modern casino slot machine game using only plain JavaScript (Web Animations API)

  casinoes6es7gamblingslotslot-machineweb-animations-api
  Language:JavaScript 399
• animatable-component

  proyecto26 / animatable-component

  Animate once, use Everywhere! 💫

  web-animations-apiweb-animationsweb-animationanimationanimation-libraryanimationstransitionsdeclarativeweb-componentsstenciljsstencilstenciljs-componentsstencil-componentspwawebuxux-experiencewaapidesignersdesigner-website
  Language:TypeScript 253

• alexmacarthur / slide-element

  A < 750 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

  animationjqueryslidetoggletransitionweb-animations-api
  Language:TypeScript 177

• trurl-master / jsdom-testing-mocks

  A set of tools for emulating browser behavior in jsdom environment

  testingreact-testing-libraryjsdommocksintersectionobserverresizeobserverviewportmatchmediajavascriptreactjswaapiweb-animations-apivitest
  Language:TypeScript 106

• okikio / native

  An initiative which aims to make it easy to create complex, light-weight, and performant web applications using modern js api's.

  cssjsanimationanimatetstypescriptapiwebappnativeeventemittermodernmanagerwaapiweb-animations-api
  Language:TypeScript 93

• gugadev / storify

  Instagram/Whatsapp stories clone built on Web Components and Web Animations API. 🔥

  custom-elementsjavascriptpostcsstypescriptweb-animationsweb-animations-apiweb-componentswebpack
  Language:TypeScript 89
• random-name-picker

  icelam / random-name-picker

  Simple HTML5 random name picker for picking lucky draw winner using Web Animations and AudioContext API.

  web-animations-apiweb-animationsweb-animationaudio-context-apiaudio-contextlucky-drawrandom-name-pickertypescriptpugscss
  Language:TypeScript 86

• gibbok / keyframes-tool

  Keyframes-tool is a NodeJs command-line tool which converts CSS Animations to keyframes object suitable for Web Animations API. Use this tool to move your animations from stylesheets to JavaScript.

  nodejskeyframescssconvert-css-animationsjavascriptweb-animations-apianimationsanimation
  Language:JavaScript 63

• okikio / spring-easing

  Quick and easy spring animation. Works with other animation libraries (gsap, animejs, framer motion, motion one, @okikio/animate, etc...) or the Web Animation API (WAAPI).

  springeasingspring-easingtypescriptanimationframer-motionmotion-oneanimejsweb-animations-apiwaapi
  Language:TypeScript 58

• JoviDeCroock / use-web-animation

  Hooks to leverage the web-animations API in under a kb

  animationanimationsreactweb-animations-apiweb-animations
  Language:TypeScript 53

• inokawa / react-animatable

  Tiny(~1kB) animation hooks for React, built on Web Animations API.

  reactcssanimationsvgtransitiontweenweb-animationsd3react-hooksreact-componentweb-animations-apireact-animationscanvasscroll-timeline
  Language:TypeScript 34

• n8jadams / smoothr

  A custom React router that leverages the Web Animations API and CSS animations.

  reactanimatedroutersingle-page-applicationsanimation-libraryreact-routercss-animationscss-animation-librarycss-animation-effectsweb-animationsweb-animations-api
  Language:JavaScript 27

• dgpedro / react-component-transition

  Easy animations between react component transitions.

  reactcomponentstransitionsanimationlazyweb-animations-apitypescript
  Language:TypeScript 23

• markcellus / wait-for-element-transition

  Easily wait for an element to CSS transition using native vanilla JavaScript

  csscss-animationelement-transitiones6polymer-elementreact-animationtransitiontransition-animationtransition-propertytransitionendwaitweb-animationsweb-animations-api
  Language:TypeScript 19

• bluwy / svelte-motion

  Experimental web animations support for Svelte transitions

  sveltetransitionweb-animations-api
  Language:Svelte 14

• rogeralmeida / revealjs-animated

  A simple to use plugin to add custom animations, based on the Web Animation API, to your presentations.

  revealjsweb-animations-apiweb-animationjavascript
  Language:JavaScript 14
• match-city

  DennisSmuda / match-city

  Tile-matching game written for Web. Vite, Typescript and StateManagement included! Supports multiple color schemes and style settings!

  gamematchingtypescriptweb-animations-apicsshtmlpuzzletile-matching-game
  Language:TypeScript 4
• animations.js

  robertoentringer / animations.js

  Npm package - Web Animations API based in Animate.css.

  waapitransitionsanimationsweb-animations-apijsparceleslintbabelprettier
  Language:JavaScript 4

• gustavomorinaga / navigation-rails

  Some simple and elegant navigation rail examples

  cssexamplesgustavomorinagahtmljavascriptweb-animations-api
  Language:HTML 3

• hideyuk1 / react-kanto-pokedex

  Kanto Pokedex website made with React.js, using CSS Grid Layout, react-transition-group, CSS transitions, Web Animations API and Intersection Observer.

  animationspokemonpokedexreactcss-gridweb-animations-apicss-transition
  Language:JavaScript 2
• RafX

  IbrahimTanyalcin / RafX

  requestAnimationFrame based `thenable` for animations and task management

  animationasynccss-animationevergreenie9javascriptjsperformancepolyfillpromiserequestanimationframetasktask-queuetask-runnerweb-animations-api
  Language:JavaScript 2

• muhammadumair12345 / red-queens-race

  Red Queen's Race Animation implemented with React, based on Hooks such as useEffect, use-web-animations, and used the concept of Web Animation API.

  reactreact-hooksweb-animations-apiuse-web-animationsuse-effectred-queens-raceanimationweb-animation
  Language:JavaScript 2
• demo.animations.js

  robertoentringer / demo.animations.js

  Web Animations API based in Animations.js.

  waapitransitionsanimationsweb-animations-apijszeit-nownow-clivuejs
  Language:Vue 2

• AlessandroCipolletti / my-js-math-and-ui-utils

  A bunch of typescript math and ui utils that I use a lot

  canvas-apiweb-animations-apidommathui
  Language:TypeScript 1

• AmeerHamzaRiaz / mobile-app-showcase

  Showcase website made using react

  reactweb-animations-apihooks
  Language:JavaScript 1

• donbrae / tripods-web

  A puzzle game.

  javascriptpuzzle-gamesvgweb-animations-api2d-gameweb-game
  Language:JavaScript 1

• enjikaka / progress-bar

  Web components progress bar

  progress-barmusicweb-componentsweb-animations-api
  Language:JavaScript 1

• hahayz77 / dicegametest

  A dice game with Vanilla JS Animation API

  csscss-animationshtmlhtml-css-javascriptjavascriptweb-animation-apiweb-animations-api
  Language:CSS 1

• ild0tt0re / fcc_pomodoro-clock

  Front End Libraries Projects - Build a 25 + 5 Clock

  reactjssassweb-animations-apifreecodecamp-project
  Language:JavaScript 1

• MohammadRezaei5 / Gunslinger

  JavaScript(DOM Manipulation, Event Handling, Web Animation API)

  domdom-manipulationevent-handlingeventsjavascriptweb-animationweb-animations-apiweb-api
  Language:JavaScript 1

• suruchi2402 / Analog-Clock

  A real time analog clock by using Web Animation API , Javascript , CSS transforms.

  analog-clockjavascriptweb-animations-apicssclockhtml5
  Language:CSS 1

• ZxBing0066 / poetry-reader

  一个诗歌朗诵网站

  ttsweb-animations-apiweb-speech-api
  Language:TypeScript 1

• AhmedShaykh / Web-Animation-API

  css3html-css-javascripthtml5javascriptweb-animations-api
  Language:JavaScript

• syedshahidashiqali / project-4A-with-html-css-js

  Panacloud Bootcamp 2020 project 4A with html, css, js and Web Animation API (WAAPI)

  html5css3css3-animationscss3-flexboxjavascriptes6waapiweb-animations-api
  Language:JavaScript