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.
- Globe rotation made up with flat world maps animated in circle mask
- Smooth animation (done with Velocity.js)
- 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
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.
SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds.
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 is an easy way to animate SVG elements.
- 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];
This technique allows you to animate the drawing of text via converting text to SVG paths.SVG path animation is a trending technique in web-design allowing designers to draw simple and elegant icons. Now, designers can easily apply SVG animations to text.