Animations

These websites can be references for your design ideas.

Animations

- anime.js

• Lightweight JavaScript animation library with a simple, yet powerful API.
  https://github.com/juliangarnier/anime/ (opens in a new tab)

- Lottie

• Lottie is a library parses After Effects animations exported as json with Bodymovin and renders them natively on mobile and web!
  http://airbnb.io/lottie/#/README

- vivus.js

• JavaScript library to make drawing animation on SVG.
  https://github.com/maxwellito/vivus (opens in a new tab)

- flip

• ⏳ The online version of the classic flip clock.
  https://github.com/pqina/flip/ (opens in a new tab)

Click / Hover interaction

- micron.js

• Add Interactions to different DOM Elements.
  https://webkul.github.io/micron/ (opens in a new tab)

- Animate.css

• Just-add-water CSS animations.
  https://animate.style/ (opens in a new tab)

- CSShake

• Some CSS classes to move your DOM!
  https://elrumordelaluz.github.io/csshake/ (opens in a new tab)

Scroll effect

- Animate On Scroll

• Small library to animate elements on your page as you scroll.
  https://michalsnik.github.io/aos/ (opens in a new tab)

- ScrollReveal

• for easily animating elements as they enter/leave the viewport.
  https://scrollrevealjs.org/ (opens in a new tab)

- pagePiling.js

• Pile your sections one over another and access them scrolling or by URL!
  https://github.com/alvarotrigo/pagePiling.js (opens in a new tab)

- Embla Carousel

• PA lightweight carousel library with fluid motion and great swipe precision.
  https://www.embla-carousel.com/ (opens in a new tab)

Swip / Drag effect

- Swiper

• The Most Modern Mobile Touch Slider.
  https://swiperjs.com/ (opens in a new tab)

- interact.js

• JavaScript drag and drop, resizing, and multi-touch gestures for modern browsers.
  https://interactjs.io/ (opens in a new tab)

Alert box

- sweetalert2

• A beautiful, responsive, customizable, accessible (WAI-ARIA) replacement for JavaScript's popup boxes. https://sweetalert2.github.io/ (opens in a new tab)

Text effect

- typed.js

• Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.
  https://github.com/mattboldt/typed.js/ (opens in a new tab)

- textillate.js

• A simple plugin for CSS3 text animations.
  https://textillate.js.org/ (opens in a new tab)

- TypeIt

• The Most Versatile JavaScript Animated Typing Utility on the Planet.
  https://github.com/alexmacarthur/typeit (opens in a new tab)

- ztext.js

• 3D typography for the web. Works with every font.
  https://bennettfeely.com/ztext/ (opens in a new tab)

- codejar

• An embeddable code editor for the browser.
  https://github.com/antonmedv/codejar (opens in a new tab)

Data visualization

- Chart.js

• Simple yet flexible JavaScript charting for designers & developers.
  https://www.chartjs.org/ (opens in a new tab)

- D3.js

• For manipulating documents based on data.
  https://d3js.org/ (opens in a new tab)

- Tabulator

• Easy to use, simple to code, fully featured, interactive JavaScript tables.
  http://tabulator.info/

- monaco-editor

• A browser based code editor.
  https://github.com/microsoft/monaco-editor (opens in a new tab)

3D related

- Vanta.js

• Animated website backgrounds in a few lines of code.
  https://www.vantajs.com/?effect=dots (opens in a new tab)

- voxel.css

• makes 3D rendering easy.
  http://voxelcss.com/

Audio related

- howler.js

• Audio library for the modern web.
  https://howlerjs.com/ (opens in a new tab)