loading...
Cover image for 10 Useful Vanilla Javascript Plugins 2020

10 Useful Vanilla Javascript Plugins 2020

kamalo__22 profile image Ibrahim Kamal Updated on ใƒป2 min read

Introduction

Modern JavaScript Frameworks makes it very easy to build complex web applications. Vanilla JavaScript refers to plain Javascript code, not extended in any way by any framework and it is good when it comes to create a small application.

1. Swiper.js

  • Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.

alt text

2. iTyped

  • Dead simple Javascript animated typing, with no dependencies.

alt text

3. tingle.js

  • A minimalist and easy-to-use modal plugin written in pure JavaScript.

alt text

4. Glide

  • A dependency-free JavaScript ES6 slider and carousel. Its lightweight, flexible and fast. Designed to slide. No less, no more.

alt text

5. Sticky Sidebar

  • These JavaScript plugins provide a handy way of creating sticky components. The first option is great for creating sticky headers whereas the second option is for sticky sidebars.

alt text

6. AOS

  • Animate On Scroll (AOS). Small library to animate elements on your page as you scroll.

alt text

7. jump.js

  • Jump.js is a modern, performant and customizable smooth scroll library written in pure JavaScript (ES6).

8. Magic Grid

  • A simple, lightweight Javascript library for dynamic grid layouts.

alt text

9. Wiv.js

A library for a more wiggly div.

alt text

10. Choices.js

Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

alt text

Posted on by:

kamalo__22 profile

Ibrahim Kamal

@kamalo__22

Front-end developer ๐Ÿ‘จโ€๐Ÿ’ป ๐Ÿคซ JavaScript, React and Gatsby lover ๐Ÿ˜Œ โš› Self-development ๐Ÿ’ช That's all about me ๐Ÿ˜ถ

Discussion

markdown guide
 

jump.js hasn't received updates in 4 years and honestly most of the time you can simply use CSS instead

Same can be said for Sticky Sidebar...

Swiper.js is amazing but it will double your bundle size. That thing is like 150kb. I wanna use it but I cannot justify it.

I personally hate AOS. I'd much rather use sal.js, which feels like a modern alternative.

Glide is dope. I usually use tinyslider because it's lighter. I'm keeping an eye on splide.js which feels like a tinyslider v2, though.

I've never used tingle, I use a personal fork of Micromodal because it's tiny and accessible. Definitely recommended.

Can't speak for the others.

 

Thank you so much ๐Ÿ’™

 

Nice article indeed!
3ash! :D

 
 

ุงูŠู‡ ุฏู‡ ุงู†ุช ุดุบุงู„ ููŠ Pelcro ู…ุน ุนู…ุฑูˆ ุงู„ุณู‚ูŠู„ูŠ :D

 

ุฑุจู†ุง ูŠูˆูู‚ูƒู… ูŠุง ุฑุจ ุนู‚ุจุงู„ูŠ ูŠุง ุฑุจ ๐Ÿ’™

 

Please suggest vanilla js plugin similar to MagnificPopup.
In particular, gallery support. Slide between images in modals.
It's so frustrating not to have such great functionality in vanilla plugins.

 

Great article. Very useful.

 
 

Amazing! Thanks for sharing these ๐Ÿ‘

 

you are welcome ๐Ÿ’™

 
 

7abeby ya ahmed :D โ™ฅ

 
 

I like flickity and I've been using it for years as my go-to carousel, but Swiper seems very interesting with a few extra options... Thanks for the list!

 

you are welcome ๐Ÿ’™

Swiper is very very VERY awesome.

 
 

Thank you ๐Ÿ’™๐Ÿ’™