It's time to create new or re-design your websites to bring it to the next level.

Check out Top 110+ Best Free Joomla! templates Listing of 300+ Best Free WordPress themes

Javascript can be used to create games, APIs, animations, dynamic effects and many other effects, it is used to engage users and helps you create awesome animations.

The below is great useful Free Javascript Effects Colllection that you can’t miss! You can use them to creat menu animations, interactive drag&drop effects, image hover effects, modal windows effects, content filters, preloaders, typography effects, sliders and more.

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-layout1

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 plugInsert downloadin

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

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

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

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

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

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

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

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

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

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

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

Check them out and download the ones you like most!

Are you Web Freelancer or Web Design Company? Join our Club and Access our Resource!

Access 500+ PRO Premium Joomla! and WordPress themes with $19,200 just $149, Quickstart Package included!

Buy one-time, get life-time access!

Access Life-time All-In-One Membership with 500+ Premium WordPress themes and Joomla templates just $239.00 (instead of $399) after discounted! Life-time Access, Download and Support, One-time Payment, No Renewal. Coupon code: WORKATHOME

Join All-In-One Club with 40% OFF on today!

The Pandemic Continues So Do Our Support! We're offering 40% Discount on all purchases! Code: REMOTEWORK More Details
The Pandemic Continues So Do Our Support! We're offering 40% Discount on all purchases! Code: WORKATHOME More Details