Complex SVG Animations Made Simple with JavaScript
Vložit
- čas přidán 4. 08. 2024
- 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! - Jak na to + styl
2-3 weeks: The AdvancedFrontends early access launch! Enter your email: designcourse.com/af
Cool stuff man! Thanks for sharing!
Thanks for the video!
This is a really cool video! Thank you!
Great one @Gary
Great Video.
Can you come with the tag of SVG?
Or, you have already published any videos on it?
super cool
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!
Wow, coolness award
Thank 🎉
I think you might be the best at gsap on youtube to this point
15:18 I almost spat my coffee out 😂
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
my .svg looks extremely untidy when opened in VSC, any way to export it properly or make it look better please?
Why you are not publishing the code...?
Quick question, can i use gsap for commercial purposes. Also, will i be losing anything if i used Anime js instead?
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
My gap code is not working!
But why do we need SVG for that? We can do this with divs and spans, no?
Thanks gasp work is amazying
-107 it's the most important part of the video. Nobody wants to see the tip lol Great tutorial, man!
Is Inkscape able to do this ?
yes
Too long of a loader it’s not UX friendly, although it’s cool but I don’t see it being worth it
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