Awesome Frontend

Collection of awesome tools and libraries for building interfaces.

Animation and Parallax

Lax.js
Details

Simple & light weight (3kb minified & zipped) vanilla javascript plugin to create smooth & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!

Mainly used to create parallax effects

Pros
- Predefined sets for parallax with very simple configuration rules
- Can be enabled / disabled / reinitialized (for window resize)
- Support custom animation rules
Cons
- Custom animations are not easy to configure
- Cannot define a threshold for the predefined sets

UI components

Images comparison

Image Compare Viewer
Details

Compare before and after images, for grading, CGI and other retouching comparisons. Vanilla Javascript, zero dependencies.

Pros
- Dependency Free
- Works very well on mobile and touch friendly devices
- Support vertical and horizontal modes
- Simple markup and simple setup
- Actively maintained

Sliders

Swiper.js
Details

The most modern mobile touch slider

Pros
- Dependency Free
- Works very well on mobile and touch friendly devices
- Easy to define bullets and navigation buttons
- Support RTL
- Different modes like fixed number of slides, auto width, variable height, free mode, multi-row, nested sliders ...
- Allow spaces between slides
- Built-in lazy loading
- Expose events

Utilities

in-view.js
Details

Get notified when a DOM element enters or exits the viewport. A small (~1.9kb gzipped), dependency-free, javascript utility for IE9+.

Pros
- Dependency Free, small in size
- Dead simple to implement
Cons
- Original author archived the repository, this means it's deprecated and won't recieve fixes and updates
- Use MutationObserver. Currently IntersectionObserver is way more performant
- Some options like threshold cannot be defined per instance. It's global

Vue

Use these when shopping for Vue libraries.

UI Utilities

Form Validation

vee-validate
Details

Template Driven Validation Framework for Vue.js

Pros
- Dependency Free
- Actively Maintained
- Localization Support
- Async and Custom Rules Support

I18n

vue-i18n
Details

Vue I18n is internationalization plugin for Vue.js

Pros
- Most Popular
- Actively Maintained
- App-level translations as well as component-level translations
for Nuxt use the nuxt-i18n module that uses this under the hood.

UI components

Sliders

hooper
Details

A customizable accessible carousel slider optimized for Vue

Cons
- No longer maintained
Pros
- Most Popular
- Touch, Keyboard, Mouse Wheel, and Navigation support
- SSR Support
- Easily customizable through rich API and addons