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.
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)
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.
1500+ Vintage Vector Elements With 100+ Vintage Style Illustrations, 900+ Ornaments, and 450+ Borders, All Professionally Made With a 19th Century ...
1500+ Vintage Vector Elements With 100+ Vintage Style Illustrations, 900+ Ornaments, and 450+ Borders, All Professionally Made With a 19th Century Touch. File Formats Ai and EPS, Get This Pack For Just $29! (58% 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!
1380 Animal themed icons delivered in 7 different design styles: from the trendy Material or Flat Styles to Iconshock's unique creations. Only $19 ...
1380 Animal themed icons delivered in 7 different design styles: from the trendy Material or Flat Styles to Iconshock's unique creations. Only $19 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.
Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550...
Get today more than 1000 Packages and Boxes Mockup Files in an extensive bundle for only $29 with a 95% limited discounted price of its normal $550 USD. Find different materials and presentations (Box, Paper, Metal, Plastic and Bottle) and hundreds of possible matches and finishes for your packages.
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.
131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bund...
131 unique high-resolution mockup, based on real images and also including smart objects feature to get photo-realistic effects. Normally this bundle could be priced up to $380, get it only $14! Limited-time promo.
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.
Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placehol...
Massive 23,000+ PowerPoint Presentation Slides Bundle, 2000+ Vector Icons, 3 Aspect Ratio Formats, Animated Transitions, Drag & Drop Image Placeholders, Vector Shape Elements, Scalable World & USA State Maps, Infographics, Tons of Content More! Only 19$ (92% Off)
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.
40 Display Fonts Bundle, 9 Type Design Styles, Several Weights, Variations, Alternate Characters, Ligatures, and Multi Language Support! Slick desi...
40 Display Fonts Bundle, 9 Type Design Styles, Several Weights, Variations, Alternate Characters, Ligatures, and Multi Language Support! Slick designs with tons of mojo, only 19$ (93% 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.
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 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.
Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Ne...
Ultimate Tech Training Bundle: Lifetime Subscription for $19! 800+ Courses to learn Programming, Web Development, Software Testing, Mobile Apps, Networking, e-Commerce, Design, Data, IT Certifications, and much more! (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.
1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use ...
1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use License.