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

Wavy button on hover

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

Fluid Svg Background

Anime.js Svg Morph

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

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

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

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

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

GSAP MotionPathPlugin

GSAP MotionPath Plugin SVG

Landing Page for a Housing Complex in Buenos Aires, Argentina

Living Landing

C. Living - Landing Page

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

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

SeoPromo

Seo Promo

bonivedesign

Bonive Svg Artist

Fun little project to explore light and dark mode using Webflow. Hope you enjoy.

Mercado da Torre

mercado-da-torre-2020

OceanSafe is a textile technology company for circular, biodegradable, and toxin-free textiles. The core of their solutions is proprietary biodegradable synthetic textile fibers and yarns.

You can find the live page here: https://oceansafe.co

OceanSafe

OceanSafe Textiles

Created an original svg animation with SVGator (svgator.com) and embedded it in the hero section. This animation is very subtle, but I'm looking forward to building more advanced animations with this tool.

Discover svg animation websites built by the Webflow community

Discover svg animation websites built by the Webflow community