Create a Modern Preloader - JavaScript, Vite & GSAP (Part 1 of 2)
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!