A simple SVG morphing transition created with Anime.js. The button action showcases a fluid transition that ends with the transformation of the con...

A simple SVG morphing transition created with Anime.js. The button action showcases a fluid transition that ends with the transformation of the container and reveals the subjacent information. It is Styled with SCSS and structured with basic HTML where the SVG elements are placed. Created by CodePen user Paolo Duzioni.

A foot tapping animation with a flat art style that can be used as a preloader. It uses SVG animated with GreenSock (GSAP) and their Morph SVG plug...

A foot tapping animation with a flat art style that can be used as a preloader. It uses SVG animated with GreenSock (GSAP) and their Morph SVG plugin. This loader animation was created by CodePen user Darin.

This is a set of four different SVG animations for menu buttons. When toggled, they change from a normal triple bar option icon to a cross or back ...

This is a set of four different SVG animations for menu buttons. When toggled, they change from a normal triple bar option icon to a cross or back arrow icon. Created by CodePen user Tamino Martinius.

This is a neat and fluid toggle animation on a checkbox. The animation path is controlled by JavaScript styled in CSS with the use of HTML to use s...

This is a neat and fluid toggle animation on a checkbox. The animation path is controlled by JavaScript styled in CSS with the use of HTML to use several SVG lines. Created by Codepen user Timothee Guignard.

What you got here is a CSS mask effect that on hover, the mask is animated with a gooey flowing effect. It's built with Sass SCSS preprocessor and ...

What you got here is a CSS mask effect that on hover, the mask is animated with a gooey flowing effect. It's built with Sass SCSS preprocessor and mainly uses SVG properties. Created by Codepen user Irem Lopsum. 

Popmotion gives the power of JavaScript merged with the simplicity of CSS to make declarative animations easily on your HTML, SVG and React project...

Popmotion gives the power of JavaScript merged with the simplicity of CSS to make declarative animations easily on your HTML, SVG and React projects. Its API implement semantics to make easier work with different JavaScript flavors and propose a library of custom animation to enhance your workflow pace.

An amazing login form with an animated SVG avatar that responds to the input in the email & password fields. Used the GSAP TweenMax library + GSAP'...

An amazing login form with an animated SVG avatar that responds to the input in the email & password fields. Used the GSAP TweenMax library + GSAP's MorphSVG plugin for the animating.

Loading icons and small animations built with pure SVG. To use them, download or bower install svg-loaders. An icon's color can be manipulated by c...

Loading icons and small animations built with pure SVG. To use them, download or bower install svg-loaders. An icon's color can be manipulated by changing the fill attribute in the SVG file. It's important to keep in mind not all browsers support animated SVGs. You can preview all of these neat loaders in action below!

A curious & experimental SVG letter animation tutorial based on the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett. Powered by Jul...

A curious & experimental SVG letter animation tutorial based on the Dribbble shot "Shading Letters in Illustrator" by Jake Bartlett. Powered by Julian Garnier's anime.js. Crafted in HTML and styling added using CSS.

A transitional animation that showcases a variety of famous devices changing shapes within one another. Utilizes SVG resources and JS for the anima...

A transitional animation that showcases a variety of famous devices changing shapes within one another. Utilizes SVG resources and JS for the animation.

An experiment using the library anime.js, where grid items get revealed and unrevealed by animated, morphing SVG paths. This is possible thanks to ...

An experiment using the library anime.js, where grid items get revealed and unrevealed by animated, morphing SVG paths. This is possible thanks to SVG paths for various purposes like data-cover, data-uncover, data-fill, data-duration, data-easing-in, data-easing-out and data-delay.

A responsive SVG slider that includes material (radial) transitions. These transitions are achieved using SVG clipPath and mask elements. The neces...

A responsive SVG slider that includes material (radial) transitions. These transitions are achieved using SVG clipPath and mask elements. The necessary vectors are included within the source files, so you don't have to worry about creating them.

An interesting snippet applying advanced CSS transforms on SVG paths for animation purposes by computing the actual transformed path.

An interesting snippet applying advanced CSS transforms on SVG paths for animation purposes by computing the actual transformed path.

An awesome snippet featuring 5 groups of SVG animated icons, and in this case health related ones, showcasing a fantastic entrance, a vibrant smoot...

An awesome snippet featuring 5 groups of SVG animated icons, and in this case health related ones, showcasing a fantastic entrance, a vibrant smooth close-up as well as a shadow while hovering over them.

A JavaScript library to help you simplify the SVG animation process and used as an extension of SnapSVG (a JavaScript SVG library), including a com...

A JavaScript library to help you simplify the SVG animation process and used as an extension of SnapSVG (a JavaScript SVG library), including a complete documentation, examples, GitHub repo, and it is easy to include in your project.

A beautifully crafted usage example for legomushroom's paper peel effect that features animations for SVG illustrations emulating the exciting sens...

A beautifully crafted usage example for legomushroom's paper peel effect that features animations for SVG illustrations emulating the exciting sensation of peeling of a gift box.

Adobe web platform's useful library provides you with clean, streamlined, intuitive, and powerful API for animating and manipulating both your own ...

Adobe web platform's useful library provides you with clean, streamlined, intuitive, and powerful API for animating and manipulating both your own SVG content and Snap generated SVG content.

Hover effect using SVG and CSS transitions with a circular frame sneak peek clip-path showing up some beautiful and dark illustrations.

Hover effect using SVG and CSS transitions with a circular frame sneak peek clip-path showing up some beautiful and dark illustrations.

A CSS & jQuery snippet that animates with some gestures a rounded emoji face created out of SVG embedded in HTML code as you click on the butto...

A CSS & jQuery snippet that animates with some gestures a rounded emoji face created out of SVG embedded in HTML code as you click on the button of the gesture you want.

A nice CSS slider featured by SVG format figures that have a nice wobbling effect as you slide it along.

A nice CSS slider featured by SVG format figures that have a nice wobbling effect as you slide it along.

An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

An animated vector-based digital clock that features really nice up-popping effects crafted by Icebob who used GSAP for the animation.

A code snippet made in CSS and JavaScript which creates an animated background in low-poly style. It is perfect for any kind of website, although i...

A code snippet made in CSS and JavaScript which creates an animated background in low-poly style. It is perfect for any kind of website, although its modification is a bit painful, especially its colors. The snippet is free and it was created by Samuel Marchal.

A material design chat app made in CSS and SVG elements, with cool animations and a flat design. When you pull the white part, the chat bubbles app...

A material design chat app made in CSS and SVG elements, with cool animations and a flat design. When you pull the white part, the chat bubbles appear, and clicking in the bubbles will take you to the actual conversation. This design can be implemented in any app project, and it was created by Nikolay Talanov.

A gorgeous and colorful set of SVG loaders without using any CSS or JavaScript. The loaders includes icons like bars, waves, dots, hearts, circles,...

A gorgeous and colorful set of SVG loaders without using any CSS or JavaScript. The loaders includes icons like bars, waves, dots, hearts, circles, and more cool shapes. These loaders were created by Sam Herbert.

A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations...

A gooey menu created in CSS and SVG following the Material Design guidelines. It is one of four styles of gooey menus which have similar animations. However, this circular effect makes this a bit more relevant since it can be used not only on websites but in mobile apps as well.

Lazy Line Painter is a jQuery Plugin for animating SVG paths. It works by exporting your line art from Illustrator as an .SVG, ensure that there ar...

Lazy Line Painter is a jQuery Plugin for animating SVG paths. It works by exporting your line art from Illustrator as an .SVG, ensure that there are no fills and no closed paths; then drop your .SVG file into the 'SVG to Lazy Converter.' Then just copy the JS code.

An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Thei...

An awesome set of ten different transition effects created with CSS3 and activated on hover, perfect for applying them to images and/or icons. Their inactive states include overlays in circles and square shapes, in diverse variations. Created by ksk1015 and uploaded to CodePen by Joakim Wimmerstedt.

Animated bar chart switchable between how you feel about the glass being half full, half empty or whatever, it switches colors and direction.

Animated bar chart switchable between how you feel about the glass being half full, half empty or whatever, it switches colors and direction.