Modern ways of revealing new content using SVG animations.

Overview

Page Loading Effects

Modern ways of revealing new content using SVG animations.

Article on Codrops

Demo

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

© Codrops 2014

You might also like...

Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. This is a porting to Web Animation API of the fabulous animate.css project.

Animatelo Just-add-water Web Animations Animatelo is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emp

Nov 12, 2022

A decorative website background effect where SVG shapes morph and transform on scroll.

A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Dec 26, 2022

Javascript and SVG odometer effect library with motion blur

Javascript and SVG odometer effect library with motion blur

SVG library for transitioning numbers with motion blur JavaScript odometer or slot machine effect library for smoothly transitioning numbers with moti

Dec 27, 2022

circle-svg-animation

circle-svg-animation

Circle SVG Animation Plug css, js and just add short code in your html. Change the custom attribute data-percent and data-time for setting your percen

Aug 18, 2022

Lightweight, simple to use jQuery plugin to animate SVG paths

jQuery DrawSVG This plugin uses the jQuery built-in animation engine to transition the stroke on every path inside the selected svg element, using

Dec 20, 2022

The Illusion of Life: An SVG Animation Case Study

The Illusion of Life: An SVG Animation Case Study

svgAnimation.js is a Snap.svg plugin used to create complex animations from simple SVGs svgAnimation takes the complexity out of creating Snap.svg ani

Nov 8, 2022

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hover.

Crosshair Mouse Cursor Distortion Demo of the tutorial on how to craft a fullscreen SVG crosshair mouse cursor with a special distortion effect on hov

Sep 23, 2022

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

image/video/content slideshow engine providing high quality animation effects including Kenburns Effect and GLSL Transitions.

Diaporama Diaporama is an image/video/content slideshow engine providing high quality animation effects including Kenburns effect and GLSL Transitions

Nov 26, 2022
Owner
Codrops
Codrops
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.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Codrops 112 Jul 27, 2022
Create cool animated SVG spinners, loaders and other looped animations in seconds

SVG Circus SVG Circus enables you to create cool animated SVG spinners, loaders and other looped animations in seconds. Developing To run a local SVG

Alex Kaul 301 Dec 24, 2022
Some ideas for modern multi-layer page transitions using CSS Animations.

Multi-Layer Page Reveal Effects Some ideas for modern multi-layer page transitions using CSS Animations. Article on Codrops Demo Sponsor Demo sponsore

Codrops 117 Nov 1, 2022
Lazy Line Painter - A Modern JS library for SVG path animation

Lazy Line Painter lazylinepainter.info A Modern JS library for SVG path animation Getting Started | Documentation | Examples | Lazy Line Composer Gett

Cam O'Connell 1.9k Jan 3, 2023
Some ideas for decorative link distortion effects using SVG filters.

Distorted Link Effects A couple of ideas for decorative link distortion effects using SVG filters on lines, circles and squares. Article on Codrops De

Codrops 122 Dec 4, 2022
Some shape morphing hover effects on images using SVG clipPath.

Organic Shape Animations with SVG clipPath Some shape morphing hover effects using SVG clipPath on an image. Article on Codrops Demo Credits Anime.js

Codrops 197 Oct 16, 2022
A React component for creating typing animations.

react-typewriter A react component for animated typing text. Installation npm install --save react-typewriter Usage Pass in children to the TypeWrite

Ian Dilling 80 Dec 1, 2022
CSS loading animations with minimal effort!

Whirl CSS loading animations with minimal effort! whirl is a curation of CSS loading animations(whirls! ?? ). It started as a drop in CSS file to get

Jhey Tompkins 1.4k Jan 4, 2023
🔮 CSS loading animations made by single element.

Three Dots The project is a set of CSS loading animations created with three dots which made by just single element. I think the project can not only

Zongbin 1.2k Dec 29, 2022
Pure css cross-browser loading animations.

[ArtWorx] xLoader Pure css cross-browser loading animations. xLoader is part of the ArtWorx collection. Most of the loaders made by community, You can

Anas Tawfik 21 Nov 15, 2021