How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library.
jQuery SVG Tutorial Plugin & Tutorials with Example
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.
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.
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.
Today we’d like to share a couple of tab styles with you. We use pseudo-elements, SVGs and CSS transitions for some of the techniques.The collection contains some styles and effects for modern tabs; from a simple box to a SVG shape. Depending on your design, different tab layouts and looks can spice up your sections; think outside of the box (literally) and you’ll see how interesting the usually boring tabs can become.
oblurlay is implement a blur view of iOS7 style with svg and jquery.
A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs.
Enliven ‘em is a jQuery plugin which lets you animate any vector graphic in SVG form in many different ways when your illustration become visible in a user browser viewport (suitable for “non-hover” devices like Apple’s ones). Also you can allow an animation to be repeated when user click your graphic.
- More than 70 build-in effects
- Suitable for Touch Devices
- Both In and Out Animations
- Your SVG can be Responsive
- Easy Integration
- Separate Animation Editor App
- All Modern Browsers (with some IE and Opera restrictions)
An eye-catching filling effect for your icons, that can be used to make a simple page look cool and dynamic.