Discover the best svg-animation websites created by professional designers. Get inspired and start planning your perfect svg-animation web design today!

Matter.js project that uses responsive SVG bodies. Tutorial available on YouTube: https://youtu.be/hZkah1Y85Oc

Matter.js with SVG Bodies

Matter JS with SVG Bodies

Wavy button on hover

First project I developed for the company I work for SOULMACHINE, fashion incubator and brand development bureau based in Paris. I chose for clean minimalistic design with graphic SVG animations to illustrate main directions of SOULMACHINE.

SOULMACHINE

soulmachine

Source:
https://github.com/codrops/ShapeMorphIdeas/

Fluid Svg Background

Anime.js Svg Morph

Watch tutorial at https://www.youtube.com/watch?v=Ic7FusHCDoM

SVG Stagger Tutorial

A simple hover effect for images using different SVG filters.

Each image has different filters applied to it. Make sure to have a Unique ID for each filter.  

SVG filters on Image using GSAP

svg-filters-on-image-using-gsap

This is a Storytelling site experiment I did with the content of my actual recent client. The site includes a lot of scroll animations and interactive storytelling concept. I hope you enjoy this. cheers! 


PS: sorry I haven't made it cloneable : ( please ask your queries in the comments.

NSC - Full Page interactive Scroll animation

This is my first ever clonable. It's a concept of the home page for a travel agency called Planco. This was a part of Flux's challenge & I decided to make this public as it has some somewhat complex elements to it & I feel like it would be valuable to my community. 

The site features an svg animated through css (logo), a custom cursor in the destinations section, and a complex testimonial slider touched up with a bit of custom code. 

Hope you find it useful! 

Planco

Travel Agency Home Page | PlanCo

A dedicated management agency representing the underrepresented; Championing black talent across digital entertainment.

Season25

Season 25

Animate a div, img, whatever along a path described by an SVG with GSAP's MotionPathPlugin.

GSAP MotionPathPlugin

GSAP MotionPath Plugin SVG

Overview: Ledger Nano X is a product I used since 2016. I loved the project & decided to redesign the landing page 8 years later. For that I used scroll-trigger similar to what is used in Apple. The site received an award on Behance. 1 year later I began giving this project as a test to developers coming wanting to get employment at our agency, all of whom failed it & could not acomplish within 7days. I decided to give it a go & completed it in 14h.

Features:  
1. The navigation was used with vanilla JS & some CSS 🔥 
2. The logo is embeded as SVG & animated through CSS 🔥 
3. Custom CSS for hover interactions 🔥 
4. Ukiyo Parallax Library 🔥 
5. Apple like scroll-trigger done natively in Webflow 🔥 
6. Auto rotating tabs using Webflow JS + JS 🔥 
7. Swiper slider (Swiper.JS) 🔥 

Ledger Nano X

Add awesome SVG animation effects to your Webflow projects!
This widget allows you to animate SVG, to look like it’s drawing itself. There are a variety of different animations available, as well as the option to create a custom script to draw your SVG with your own style.

SVG Animation Cloneable

SVG Animation

Landing Page for a Housing Complex in Buenos Aires, Argentina

Living Landing

C. Living - Landing Page

Vibrand Design

Our first Patreon exclusive Cloneable is here. SVG dash stroke animation based on data from CMS with GSAP, GSAP Scrolltrigger and the GSAP DrawSVGPlugin. 

- Dennis from Vibrand Design

++++++++++++++++++++++++
Support our work and get the editable JavaScript Code on Patreon: patreon.com/denniskarg

Stats Counter Animation

Animated curvy SVG section on scroll

Animated Curvy SVG Section on Scroll

Fico Studio creates abstract universes where the client's needs and the creative process come together to create new ways of communication.
Fico's professionals cover different disciplines from film to photography, branding and digital design as well as interior and object design.

Design & Code : Nafta Studio https://webflow.com/naftastudio

FICO CREATIVE STUDIO

FICO CREATIVE STUDIO PORTFOLIO

bonivedesign

Bonive Svg Artist

Design, vector animation and website development for a specialist in site promotion

Discover svg animation websites built by the Webflow community

Discover svg animation websites built by the Webflow community