http://bit.ly/3YeXzeU 👈 Learn UI/UX & CSS Today. Use "UI2023" for 23% Off!
https://designcourse.com/af 👈 My upcoming "Advanced Frontends" Course
-- Today, we're embarking on a 2 part series where I show you how to create a modern preloader for websites and apps. Today, we'll focus on using Figma to create a unique and relevant loading illustration (for my wife's lactation consulting business!). We'll utilize an SVG filter that creates a cool GOO effect. We'll also get it up and running with HTML and CSS. In the next tutorial, which releases in 2 days, I'll show you how to get it functioning with greensock (GSAP) along with Vite.js and ImagesLoaded.js.
Codepen demo for this project:
https://codepen.io/designcourse/pen/d...
0:00 - Intro
0:52 - SVG Illustration in Figma
4:30 - Installing Vite.js
6:40 - Installing Sass
8:29 - Writing HTML
13:19 - Writing the CSS
18:40 - Final result
Let's get started!
#frontend #uiux #figma
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
Learn UI/UX: https://designcourse.com
My personal FB account: http://fb.com/logodesigner
Coursetro FB: http://fb.com/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!
On this page of the site you can watch the video online Create a Modern Preloader - JavaScript, Vite & GSAP (Part 1 of 2) with a duration of hours minute second in good quality, which was uploaded by the user DesignCourse 14 February 2023, share the link with friends and acquaintances, this video has already been watched 30,537 times on youtube and it was liked by 915 viewers. Enjoy your viewing!