Complex SVG Animations Made Simple with JavaScript

Показать описание

-- Today, I'm going to show you how I created a preloader/loading animation for AdvancedFrontends. I may or may not end up using this particular animation for the website, but I figured some of you would want to know how I made it!

0:00 - Intro
0:27 - Project Overview
0:58 - SVG Logo Overview
3:40 - HTML & CSS
7:00 - JavaScript
20:08 - Final Result
20:53 - AdvancedFrontends

Let's get started!

#svg #frontend #javascript

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

Рекомендации по теме

Комментарии

Why you are not publishing the code...?

Instead of making a black box for a bg you can make the document bg a color by going to File>Document Setup. Grid colors the top swatch is the bg. Change that color and click the “simulate colored paper” then close. To see it you have to zoom in and out to update viewport. Wallah!

elissitdesign

Can you come with the <animate> tag of SVG?
Or, you have already published any videos on it?

ibnsiddique

I think you might be the best at gsap on youtube to this point

XxbankerboomxX

But why do we need SVG for that? We can do this with divs and spans, no?

Thanks gasp work is amazying

hydyravezberdiyew

Quick question, can i use gsap for commercial purposes. Also, will i be losing anything if i used Anime js instead?

nikhilverma

I've text like you, but when i do "from yPercent: -200" it starts 200% from top, slide down, and stop like 50% before initial position

theovandormael

Any way of adding sound? And/or even better... realtime sound (midi+sf2, tone.js, etc.)?

And is there any way to save all this in one download (.html, .xml, etc.)? One that doesn't need internet even if it needs a browser?

Thanks

mcwooley

my .svg looks extremely untidy when opened in VSC, any way to export it properly or make it look better please?

JanKellner-lh

This is a really cool video! Thank you!

corikomiyama

Too long of a loader it’s not UX friendly, although it’s cool but I don’t see it being worth it

JlHAD

Complex SVG Animations Made Simple with JavaScript

Complex SVG Animations Made Simple with JavaScript

Make Awesome SVG Animations with CSS // 7 Useful Techniques

SVG Explained in 100 Seconds

EASILY Animate Complex SVG's with SVGator - Tutorial

SVG Animations Idea | 7 SVG Animations You Must See! | Html Css Javascript Effects & Animations

Amazing SVG Animations with No Code

Creating Complex SVG Animations Using SMIL | SVG Animation Tutorial

I Switched to Bone Animations (here's how it went)

React meetup 80

I Learned How to Animate SVGs In UNDER 1 HOUR: SVGator Tutorial

The Right Way to Animate SVG in React

Wow.. You can Export Adobe After Effects Animations as SVG! Here's how.

Subtle, yet Beautiful Scroll Animations

Animate SVG Icons using HTML and CSS | #shorts

Sarah Drasner's Designing Complex SVG Animations at CSS Dev Conf

How to animate an SVG illustration in After Effects: 5-min easy tutorial

SVG and GreenSock for Complex Animation - Forward 4 Web Summit

Сool animation of icons in Figma (SVG motion )

Complex Responsive SVG Animations - Sarah Drasner (Zillow)

How to Animate SVG For Free

Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS

CSS movement path. Pure CSS animation along svg path with offset-path / motion-path and keyframe.

Draw any SVG in React (Harry Potter)

Trendy Logo Animation in After Effects - After Effects Tutorial - Simple Logo Animation