Best SVG Animations for websites

1. Enliven'em! - Animation Engine for Vector Graphic

View Details

Enliven ‘em is a jQuery plugin which lets you animate any vector graphic presented as SVG files in many different ways when your vector illustrations become visible in a user’s browser viewport (good for “non-hover” devices like Apple’s ones). Also you can allow an animation to be repeated when a user clicks or taps your graphic.

All animation data are stored in SVG code itself which lets you port it to any domain. The Animation Editor, which is included in the download package, can help you to add these data in a WISIWYG mode.

The integration of the Enliven ‘em script is easy: only two additional scripts in your page’s code in addition to your existing jQuery.

Main features:

·         Brand New

·         More than 80 build-in animation effects

·         Separate Animation Editor App

·         Suitable for Touch Devices

·         Both In and Out Animations

·         Easy SVG Responsive

·         Easy Integration

·         Cross Browser

·         Looped animation for the whole SVG

·         Free Updates & Support

2. LivIcons Evolution for jQuery

View Details

LivIcons Evolution is the next modern generation of a classic pack of cross browser vector icons with an individual animation for each one. They are based on SVG (Scalable Vector Graphic), powered by JavaScript, work in all modern browsers and look perfect at any devices. Yes, Retina too.

The main purpose of this script is to bring more individuality and interactivity to customers’ sites and make them stand out from a competition.

Please get familiar with the full features’ list, examples, documentation and the Configuration tool on the demo site and put the LivIcons Evo to work for you.

Main features:

·         379 unique animated icons and growing

·         Each icon comes with five (5) design styles

·         Very flexible settings

·         Responsive, size can be controlled by CSS media queries

·         Hover, click events and autoPlay option

·         Online Configuration Tool for easy using

·         Powerful JavaScript API

·         Based on jQuery and GSAP (GreenSock Animation Platform)

·         Completely redeveloped from scratch

·         Any color, any size

·         Animated and static

·         Retina perfect

·         All modern browsers

·         And more…

3. Gear HTML5 Audio Player

View Details

Showcase your music with style. Gear Player provides a never seen user interface that will engage everybody. It pushes HTML5 to its limits with smooth SVG animations, an unique Canvas equalizer and SoundCloud support.

Main features

·         Intuitive Interface

·         Responsive Design

·         Smooth SVG Animations

·         Canvas Equalizer

·         Shuffled Playback

·         Circular Trackbar

·         JSON Playlists

·         Docked Mini Player

·         SoundCloud Support

·         Randomized Colors

·         Endless Albums

·         Over 40 Options

·         Mobile friendly

·         Crafted with LESS

·         Demo page included

4. Vector Animated Countdown With Progress Bar

View Details

This Countdown is powered with a great cross-platform library — Raphaël — that uses SVG animation wherever it’s supported (and VML for IE browsers). Includes jQuery and several plugins for styling text with shadow and for background animation. Very easy to install. No technical knowledge needed for basic usage.

- Vector-based counter animation - Scalable - Nice-looking progress bar - Easy to install - No special knowledge needed - Valid HTML

5. Animated SVG Globe with Markers and Logos

View Details

Spinning Earth Globe animations with markers and logos’ carousel for Desktop and Mobile. Perfect way to visualize location of event/office/store/city or to showcase partners/sponsors logos.

LIVE PREVIEW

·         Globe rotation made up with flat world maps animated in circle mask

·         Smooth animation (done with Velocity.js)

·         Animation speed and sequence controlled with Javascript (defined variables)

·         Animation shows up when the Globe becomes visible in the browser

·         Resolution independent SVG graphics (perfect for displays with higher pixel density, such as Retina)

·         Easy to change width, colors or visibility of elements, animation parameters

·         In total: 7 different animation examples + 33 color presets

·         Versions:

1.    globe with map markers (3 examples)

2.    globe with logo carousel (2 examples)

3.    just the globe (2 examples)

·         Included:

·         HTML, CSS, JS, SVG files

·         Documentation

·         PSD helper

          Browsers:

·         For Desktop: IE9, IE10, IE11, Chrome, Firefox, Safari, Opera

·         For Mobile: iOS Safari, iOS Chrome, Android Chrome

6. Trigons -Create and Animate Abstract SVG Images

View Details

Trigons is a flexible JS script which lets you create modern and stylish abstract SVG images with optional animations

Trigons script is coded as plugin for d3.js library (d3js.org) and it uses d3’s build-in method of Delaunay triangulation for creating colored and animated abstract images. No jQuery needed.

Script includes seven (7) methods for creating and animating SVG images and also for cross browser converting these images to PNG ones or use them as ‘background-image’ for elements in your HTML documents.

Main Features:

·         The exclusive feature of Trigons images, that they can be animated with 30 built-in effects.

·         Created Trigons SVG images can be responsive.

·         Retina perfect

·         Flexible and powerful settings

·         Works in all modern browsers

·         Any color, any size

·         Clean bright or flat colors or gradients

·         Build-in Color Palette Generator

·         Convert to PNG

·         Use it as “background-image”

·         Dynamic add, update, animate and convert with 7 JavaScript methods

·         Click, Hover and “Viewport” events

·         Separate “In” and “Out” Animations

·         “Force” Animation Methods

·         Use it via JavaScript and/or via HTML5 data attributes

·         Free Support and Updates

7. 3D Pie Chartwith JavaScript

View Details

Cool 3D Pie Chart developed in JavaScript/SVG/VML alternative.

You dont requiere knowledge in JavaScript or SVG/VML.

You can change:

·         Position, width, height, radius X and Y, and depth of the pie

·         The optional legends attributes

·         The optional tooltip background and text-size

·         The titles

·         You can add more items

8. Gooey Menu: jQueryPlugin

View Details

jQuery Menu Plugin With Cool Gooey Effects

The plugin allows to create a gooey/gummy menu with circles as menu items. See the livedemo!

Features

·         Cool gooey effects using SVG filters

·         Six menu styles (spaced/stacked round, horizontal, vertical menus)

·         15+ easily customizable options

·         Easy to use event API

·         Fully responsive layout

·         Support of all modern browsers

9. Flat Design Desk Banners 

View Details

jQuery Menu Plugin With Cool Gooey Effects

The plugin allows to create a gooey/gummy menu with circles as menu items. See the livedemo!

Features

·         Cool gooey effects using SVG filters

·         Six menu styles (spaced/stacked round, horizontal, vertical menus)

·         15+ easily customizable options

·         Easy to use event API

·         Fully responsive layout

·         Support of all modern browsers

10. Starshine JS 

View Details

StarShine generates blinking stars with 6 customizable parameters. Add shiny, sexy or cartoon lights to any html element. Adjust placement, size, position, color, timing, star type.

And let it shine!

Features:

·         Easy to use

·         Low CPU usage

·         Responsive, mobile friendly

·         Rich customization settings

·         IE9+ and all modern browsers support

·         Well documented with code examples