20 Helpful Free JavaScript Effects for Web Designers

Home » Freebies » 20 Helpful Free JavaScript Effects for Web Designers

In case you are not familiar with JavaScript, it is used to engage users and helps you create awesome animations which will make your website to be remembered. Javascript can be used to create games, APIs, animations, dynamic effects and many other effects.

In this list you’ll find 20 helpful free JavaScript effects for web designers. These free JavaScript effects can be easily used by web designers and developers for creating menu animations, interactive drag&drop effects, image hover effects, modal windows effects, content filters, preloaders, typography effects, sliders and more.

Interactive drag & drop mockup coloring

Drag any color from the left toolbar to an area or text in the mockup. A blue outline will indicate a droppable element.

Interactive drag & drop mockup coloring

Grid item animation layout

This is a responsive, magazine-like website layout with a grid item animation effect when opening the content.

Grid item animation layout

Flipside – Button to modal

This is a great button that seamlessly transitions from action to confirmation. Just click it and see the awesome effect.

Flipside – Button to modal

Layzr.js – Lazy load plugin

This is a small, fast, modern, and dependency-free library for lazy loading. Lazy loading boosts page speed by deferring the loading of images until they’re in (or near) the viewport.

Layzr.js – Lazy load plugin

Mobile menu animations

Here are a few menu animations this designer coded. He is trying to make more authentic coded interactions and this is a first step.

Mobile menu animations

Trampoline effect with CSS and SVG

This is a little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. Drag the stack or click the button to navigate. See the rotating version as well.

Trampoline effect with CSS and SVG

Slideout.js – Touch navigation menu

This is a touch slideout navigation menu for your mobile web apps. It has many great qualities such as: Dependency-free, Simple markup, Native scrolling, Easy customization, CSS transforms & transitions, Just 4 Kb!

Slideout.js – Touch navigation menu

Morphing modal window

This is a call-to-action button that animates and turns into a full-size modal window. Modal windows are used to display related content, by hiding temporarily the main content.

Morphing modal window

Datedropper – jQuery plugin

Datedropper is a jQuery plugin that provides a quick and easy way to manage dates for input fields.

Datedropper – jQuery plugin

Underline.js – Animate text underline

This is a JavaScript library that sets out to do one simple job: draw and animate the most perfect and playful text underline.

Underline.js – Animate text underline

TheaterJS – Typing effect plugin

TheaterJS is a typing effect mimicking human behavior. Full documentation on usage, configuration, features and so on is available.

TheaterJS – Typing effect plugin

Content filter with CSS & jQuery

This is a slide-in filter panel powered by CSS and jQuery. It adds  great content filter effect. Perfect for portfolios.

Content filter with CSS & jQuery

Flickity – Touch & responsive slider

Flickity makes galleries, sliders, & carousels that feel lively and effortless. Physics-based animation. Touch enabled.

Flickity – Touch & responsive slider

3D Curtain effect

This is a list of split blocks that reunite on scrolling, simulating a movement along the z-axis with the help of CSS transformations and jQuery.

3D Curtain effect

PhotoSwipe – JS photo gallery

This is a avaScript image gallery for mobile and desktop. All basic gestures are supported: flick to the next or previous image, spread to zoom in, drag to pan, pinch to zoom out or close, tap to toggle the controls, double-tap to zoom.

PhotoSwipe – JS photo gallery

Material Design preloader

This is a  jQuery plugin that recreates the Material Design preloader (as seen on inbox).

Material Design preloader

Interact.js – Plugin for drag and drop, resizing, etc

This is a JavaScript drag and drop, with resizing and multi-touch gestures with inertia and snapping for modern browsers (and also IE8+).

Interact.js – Plugin for drag and drop, resizing, etc

Vivus.js – SVG animation

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearance of being drawn.

Vivus.js – SVG animation

lazySizes – Lazy load JS plugin

This is a high performance lazy loader for images (responsive and normal), iframes and scripts, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration.

lazySizes – Lazy load JS plugin

flowupLabels.js – Labels like placeholders

FlowupLabels.js is a Animated form labels to behave like placeholders, but with a twist.

flowupLabels.js – Labels like placeholders

Author
Iggy
Iggy is an entrepreneur, blogger, and designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design fonts, themes, plugins, inspiration, and more. You can follow him on Twitter

3 thoughts on “20 Helpful Free JavaScript Effects for Web Designers”

  1. Great interesting collection. I’m going to implement the flowupLabels on my newsletter fields. I saw something identical on Valentino.com and Fendi.com websites where the labels got out of the way when focused, and was dying to know how they did it. Brilliant find. Thank you and thank you to the team at Tsohost for pointing me here in the first place.

    Reply

Leave a Comment