A simple template of a weekly surf report with an animated SVG graph and a sliding content panel. The layout is powered by flexbox and viewport units. Highly experimental.
Best jQuery SVG Tutorial Plugins & Tutorials with Demo
Fancy SVG Letter Animation
Today we’d like to show you a fancy little lettering animation made with SVG and anime.js. The idea is inspired by Jake Bartlett’s gorgeous opening animation for the “Shading Letters in Illustrator” Skillshare class by Jamie Bartlett. While we didn’t do any shading, we wanted to animate the stroke of each letter multiple times to achieve a similar effect.
Simple Interactive Points Effect with SVG
Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on the POS indicator, a content layer is shown with some more information on that point; the background image becomes completely opaque. This concept could be fitting for some kind of map assisted story telling, like a travel piece or similar.
LivIcons Evolution as jQuery plugin
LivIcons Evolution is the next modern generation of a classic LivIcons pack of a cross browser vector icons with individual mini 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.
Features:
- Based on GSAP (GreenSock Animation Platform)
- Completely redeveloped from scratch
- Each icon comes with five (5) styles
- Very flexible settings
- More than 300 icons
- Hover,click and autoPlay events
- Any color, any size
- Animated and static
- Retina perfect