Awesome collection of cool SVG animations to spice up any website.
freebies
This is a set of seven SVG illustrations animated via CSS with a slight help of JS. It mainly implements CSS keyframes compiled through Sass, and u...
This is a set of seven SVG illustrations animated via CSS with a slight help of JS. It mainly implements CSS keyframes compiled through Sass, and uses JS for centering to the origin the elements within each illustration that are being animated. Created by CodePen user Stefan (EntropyReversed)
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.
280+ Vector Illustrations & Designs For T-Shirt Prints, Only $14: Includes Print Ready PNG With Transparent Backgrounds 4000px, EPS10 Editable File...
280+ Vector Illustrations & Designs For T-Shirt Prints, Only $14: Includes Print Ready PNG With Transparent Backgrounds 4000px, EPS10 Editable Files, Commercial Use License
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.
Massive Vector Avatar Generator Pack, Over 11,000 Assets For Creating Unique Characters, Avatars, and Mascots in Ai and PSD Formats. Contains Human...
Massive Vector Avatar Generator Pack, Over 11,000 Assets For Creating Unique Characters, Avatars, and Mascots in Ai and PSD Formats. Contains Human, Monster, and Robot Assets Completely Made in Vector Shapes, Get It For Just $29 (91% Off)
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!
High-resolution & easy video exportation, with predefined timelines, in this pack of 100 Animated Photos & Videos, regularly priced $19, only $9 fo...
High-resolution & easy video exportation, with predefined timelines, in this pack of 100 Animated Photos & Videos, regularly priced $19, only $9 for a limited time.
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.
400+ Components e-Commerce UI Kit, Only $14! Award Winning UI Kit In Sketch File Format, 180 Web Gradients, 250+ Icons, Extended License.
400+ Components e-Commerce UI Kit, Only $14! Award Winning UI Kit In Sketch File Format, 180 Web Gradients, 250+ Icons, Extended License.
A set of button effects made by applying SVG filters on HTML elements. They were achieved by adding distortion or blob filters to buttons, and by d...
A set of button effects made by applying SVG filters on HTML elements. They were achieved by adding distortion or blob filters to buttons, and by doing this producing some creative effects like explosions, goo, static noise, waves and more.
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 exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!
An exclusive pack of 50 Script Fonts delivered in 10 different families, covering a wide variety of styles & weights. Only $15!
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.
240+ Vector Patterns & Shapes, Only $14! Seamless Vintage Geometric Styles & Moroccan Tile Patterns, Every Asset In Vector Formats Ai & EPS.
240+ Vector Patterns & Shapes, Only $14! Seamless Vintage Geometric Styles & Moroccan Tile Patterns, Every Asset In Vector Formats Ai & EPS.
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.
Cartoon Avatars Creator Pack With Over 1800 Vector Elements To Compose Unique Looking Characters With Their Own Facial Expressions, Outfits, Hairst...
Cartoon Avatars Creator Pack With Over 1800 Vector Elements To Compose Unique Looking Characters With Their Own Facial Expressions, Outfits, Hairstyles, And Much More! Endless Combinations, Only $19! (34% Off)
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.
Responsive HTML Professional Email Templates Bundle: Mail Chimp & Email Platforms Full Compatibility, Litmus Tested, Layered PSD & Sketch Files, As...
Responsive HTML Professional Email Templates Bundle: Mail Chimp & Email Platforms Full Compatibility, Litmus Tested, Layered PSD & Sketch Files, Assets Worth $106 for Just $29 (73% Discount)
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.
820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Objec...
820+ Isolated Objects From 3 Different Mock-up & Scene Generators! Ultra High-Quality Assets In PSD format, Separated Shadow Layers For Every Object, Pre-made Scenes & Background Textures Included. Get this bundle for just $19! (98% Off)
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.
A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $...
A brand new bundle of 33 fonts in a wide variety of styles, weights & multilanguage support, normally priced $490 if purchased individually, Only $19 for a limited-time