jQuery SVG Tutorial Plugin & Tutorials with Example

Animated Text Fills with CSS3 & SVG

Animated Text Fills with CSS3 & SVG

A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

In this article I’m going to share my experiments and five ways to create patterned filled text. In three out of these five cases we will retain the ability to select the text. Of course we’d like to have that for every case but with some workarounds we can solve this problem, too.

SVG Scrolling Animation Triggered By ScrollMagic

SVG Scrolling Animation Triggered By ScrollMagic

In today’s ScrollMagic tutorial we will trigger our GreenSock animation based on the scroll position.

Animated SVG Globe with Markers and Logos

Animated SVG Globe with Markers and Logos

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.

Features:

  • 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

Vivus.js : JS library to make Drawing Animation on SVG

Vivus.js : JS library to make Drawing Animation on SVG

Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG in whatever way you like.

Elastic SVG Elements Animation

Elastic SVG Elements Animation

Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it.

HTML5 Interactive World Map with JavaScript

HTML5 Interactive World Map with JavaScript

This map is built in HTML5 code and runs with javascript based on the new technique of Scalable Vector Graphics (SVG), So it can be scaled to any size without losing its quality.

SVG Circus : SVG Spinners Loaders Animation Creator

SVG Circus : SVG Spinners Loaders Animation Creator

SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.

Inspiration for Dialog Effects with CSS3 SVG

Inspiration for Dialog Effects with CSS3 SVG

A small collection of dialog effects using CSS animations for your inspiration. Some effects use SVG animations of morphing paths with the help of Snap.svg.

Walkway.js : Animate SVG elements

Walkway.js : Animate SVG elements

Walkway is an easy way to animate SVG elements.

Options:

  • selector (mandatory) – The selector of the parent element (usually will be a specific svg element)
  • duration – Time the animation should run for, in ms. Default is 400.
  • easing – Name of the easing function used for drawing. Default is ‘easeInOutCubic’. You can also supply your own function that will be passed the progress and should return a value in the range of [0, 1];

SVG Morpheus : JavaScript library for SVG icons to morph

SVG Morpheus : JavaScript library for SVG icons to morph

JavaScript library enabling SVG icons to morph from one to the other.



Best jQuery websites design awards