deals

premiumpacks & svg animations (29 items)

Awesome collection of cool SVG animations to spice up any website.

freebies

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.

180+ Bootstrap v4 Website Themes & HTML Components, only $14:

180+ Bootstrap v4 Website Themes & HTML Components, only $14:

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.

Smashing Magazine's Complete Library, Only $29! Get Unlimited Access 60 eBooks About Web Design & Development With The Savvy & Expertise of Best Se...

Smashing Magazine's Complete Library, Only $29! Get Unlimited Access 60 eBooks About Web Design & Development With The Savvy & Expertise of Best Selling Authors On UX Design, Content Strategy, Best Design Practices, Freelancing, WordPress, and Much More! (93% Off)

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.

340+ Transparent Smoke Shapes, Brushes, Patterns, Fonts & Backgrounds, Only $19: High-Resolution Assets, Realistic Smoke Effects, Commercial License

340+ Transparent Smoke Shapes, Brushes, Patterns, Fonts & Backgrounds, Only $19: High-Resolution Assets, Realistic Smoke Effects, Commercial License

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 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.

100+ Unique Animal T-Shirt Designs & Illustrations, Only $14: Ai & EPS Vectors, Editable Texts, 100% Customizable & Resizable Designs For Commercia...

100+ Unique Animal T-Shirt Designs & Illustrations, Only $14: Ai & EPS Vectors, Editable Texts, 100% Customizable & Resizable Designs For Commercial Use

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.

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graph...

31 Packs in 1 Huge Bundle: 200+ Low Poly 3D People Models, 3DS, OBJ, FBX, STL File Formats for VR, AR, Architectural Visualization, and Scale Graphics Projects! Only 29$ (82% Off)

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.

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)

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.

Stock Animation Assets Bundle, Over 250 Pre-Animated & Ready To Use Elements in Full HD. Without Prior Experience, You Can Create Beautiful Video A...

Stock Animation Assets Bundle, Over 250 Pre-Animated & Ready To Use Elements in Full HD. Without Prior Experience, You Can Create Beautiful Video Animations for eCommerce, Education, Business, Tutorials, & Much More, Only $29 (98% Off)

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.

1400 Logo Templates, Full Vector Files in Ai, PSD with Smart Objects, PNG, JPG, 8 Design Styles, From Colorful Designs to Black and White Corporate...

1400 Logo Templates, Full Vector Files in Ai, PSD with Smart Objects, PNG, JPG, 8 Design Styles, From Colorful Designs to Black and White Corporate Logos. Regular price 4200$ Get Them All for Just 12$! (100% Off)

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.

Supercharge your workflow with hundreds of UI Elements, Responsive Layouts, Web UI Components, & Templates for prototyping apps, websites, and ...

Supercharge your workflow with hundreds of UI Elements, Responsive Layouts, Web UI Components, & Templates for prototyping apps, websites, and web apps from 16 awesome products for Sketch & Photoshop at a crazy 95% off. This bundle includes $667 worth of goodies which for a limited time you can get for just $29

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.