Тёмный

Complex SVG Animations Made Simple with JavaScript 

DesignCourse
Подписаться 1,1 млн
Просмотров 56 тыс.
50% 1

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!

Хобби

Опубликовано:

 

14 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 23   
@DesignCourse
@DesignCourse 9 месяцев назад
2-3 weeks: The AdvancedFrontends early access launch! Enter your email: designcourse.com/af
@shreyasrajagopal4433
@shreyasrajagopal4433 5 месяцев назад
Cool stuff man! Thanks for sharing!
@Jacob_Price
@Jacob_Price 9 месяцев назад
Thanks for the video!
@corikomiyama7492
@corikomiyama7492 23 дня назад
This is a really cool video! Thank you!
@sushantpaudel8259
@sushantpaudel8259 9 месяцев назад
Great one @Gary
@templatesjungle
@templatesjungle 9 месяцев назад
Great Video.
@kerrykreiter445
@kerrykreiter445 5 месяцев назад
Wow, coolness award
@elissitdesign
@elissitdesign 9 месяцев назад
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!
@rickharold7884
@rickharold7884 8 месяцев назад
super cool
@ibnsiddique6063
@ibnsiddique6063 6 месяцев назад
Can you come with the tag of SVG? Or, you have already published any videos on it?
@serychristianrenaud
@serychristianrenaud 9 месяцев назад
Thank 🎉
@XxbankerboomxX
@XxbankerboomxX 9 месяцев назад
I think you might be the best at gsap on youtube to this point
@mcwooley
@mcwooley 8 месяцев назад
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
@RajatKumar-ls7vq
@RajatKumar-ls7vq 9 месяцев назад
15:18 I almost spat my coffee out 😂
@4541047
@4541047 9 месяцев назад
Why you are not publishing the code...?
@nikhilverma4976
@nikhilverma4976 4 месяца назад
Quick question, can i use gsap for commercial purposes. Also, will i be losing anything if i used Anime js instead?
@user-gb1vo4si2b
@user-gb1vo4si2b 7 месяцев назад
my .svg looks extremely untidy when opened in VSC, any way to export it properly or make it look better please?
@theovandormael8698
@theovandormael8698 7 месяцев назад
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
@hydyravezberdiyew676 2 месяца назад
But why do we need SVG for that? We can do this with divs and spans, no? Thanks gasp work is amazying
@hudsonsilvaoliveira5674
@hudsonsilvaoliveira5674 9 месяцев назад
-107 it's the most important part of the video. Nobody wants to see the tip lol Great tutorial, man!
@JlHAD
@JlHAD 9 месяцев назад
Too long of a loader it’s not UX friendly, although it’s cool but I don’t see it being worth it
@LennertK
@LennertK 9 месяцев назад
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
Далее
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 904 тыс.
Interactive web animation with SVG (DevFest 2019)
38:19
Самый надежный автомобиль
01:00
Просмотров 285 тыс.
The Top 10 Websites of 2022 - CSSDesignAwards
24:45
Просмотров 327 тыс.
SVG, большой гайд
1:36:05
Просмотров 59 тыс.
Sprite Animation in JavaScript
46:05
Просмотров 152 тыс.
Basic, Intermediate & Pro animated hamburger icons
59:41
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 66 тыс.
The 5 Levels of Web Design - Worst to BEST UI/UX
11:22
Raw 2024 Akra BMW M1000R Exhaust Sound #bmw
0:25
Просмотров 4,2 млн
APRENDA operar com mais SEGURANÇA
0:12
Просмотров 16 млн