Complex SVG Animations Made Simple with JavaScript

bit.ly/45ylV76 👈 Design & code like me. Use "UI2023" for 23% Off!
designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- 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!
Learn UI/UX: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Designcourse.com.
Come to my discord server or add me on social media and say Hi!

[@DesignCourse]

2-3 weeks: The AdvancedFrontends early access launch! Enter your email: designcourse.com/af

[@shreyasrajagopal4433]

Cool stuff man! Thanks for sharing!

[@Jacob_Price]

Thanks for the video!

[@corikomiyama7492]

This is a really cool video! Thank you!

[@sushantpaudel8259]

Great one @Gary

[@templatesjungle]

Great Video.

[@rickharold7884]

super cool

[@kerrykreiter445]

Wow, coolness award

[@serychristianrenaud]

Thank 🎉

[@XxbankerboomxX]

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

[@RajatKumar-ls7vq]

15:18 I almost spat my coffee out 😂

[@ibnsiddique6063]

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

[@elissitdesign]

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!

[@mcwooley]

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

[@4541047]

Why you are not publishing the code...?

[@nikhilverma4976]

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

[@user-gb1vo4si2b]

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

[@theovandormael8698]

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

[@hydyravezberdiyew676]

But why do we need SVG for that? We can do this with divs and spans, no? Thanks gasp work is amazying

[@hudsonsilvaoliveira5674]

-107 it's the most important part of the video. Nobody wants to see the tip lol Great tutorial, man!

[@JlHAD]

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

[@LennertK]

The point with tutorials is usually not to copy everything exactly, but to use the knowledge to create something of your own. I do agree that it takes way too long in this example, but I will use the knowledge in this to create something shorter for myself