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.
Best jQuery SVG Tutorial Plugins & Tutorials with Demo
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];
ProgressBar.js : Beautiful and Responsive Progress bars
Beautiful and responsive progress bars with animated SVG paths.ProgressBar.js uses shifty tweening library to animate path drawing. So in other words, animation is done with JavaScript using requestAnimationFrame. Animating with JS gives more control over the animation and is supported across major browsers.
Subtle Hover Effect Ideas with SVG & CSS3
A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we’ve added some fresh effects with various transitions.
Wobbly Slideshow Effect with SVG & JavaScript
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh’s Dribbble shot and was made using Snap.svg and morphing SVG paths to animated the slide background SVGs in order to simulate the elastic effect. What happens is that we basically morph an SVG path from a rectangle to a curved shaped; either a right curve or a left curve, depending on where we are navigating to.
Tooltip Styles Inspiration with CSS3 & SVG
A small collection of various hover tooltip styles and effects for your inspiration. Using CSS transforms, border-radius and SVG shapes we can create modern looking and interesting tooltips.
Tooltips are normally used for providing some kind of extra information and they can be found in almost every website. Those tiny little helpers offer a great opportunity to add some subtle and unique effects to any design. So today we want to show you some possibilities of showing those elements in style. We only use CSS transitions via hover and also some SVGs to create unique shapes.
