Awesome Scrolling SVG Line Drawing - How they did it!
https://designcourse.com/css - Join my Interactive CSS Course!
hhttps://bit.ly/3Vg2JGz - Learn UI/UX Interactively (Coupon "LAUNCH" for $15 Off)
-- Today, we're going to take a look at an example of a modern layout that integrates a very interesting SVG animation that's controlled by the scroll. We'll design our own from scratch, and then code it up with HTML, CSS and JavaScript!
The source of inspiration for this effect:
https://crustac.fr/en/home/
Tutorials referenced:
https://css-tricks.com/svg-line-animation-works/
https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/
0:00 - Introduction
1:17 - Learn CSS & UI/UX
2:00 - Drawing the SVG Path in Figma
8:58 - HTML
11:24 - CSS
14:47 - JavaScript
18:20 - Parallax
20:58 - Final Thoughts
Let's get started!
#svg #animation #frontend
- - - - - - - - - - - - - - - - - - - - - -
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: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-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!
Видео Awesome Scrolling SVG Line Drawing - How they did it! канала DesignCourse
hhttps://bit.ly/3Vg2JGz - Learn UI/UX Interactively (Coupon "LAUNCH" for $15 Off)
-- Today, we're going to take a look at an example of a modern layout that integrates a very interesting SVG animation that's controlled by the scroll. We'll design our own from scratch, and then code it up with HTML, CSS and JavaScript!
The source of inspiration for this effect:
https://crustac.fr/en/home/
Tutorials referenced:
https://css-tricks.com/svg-line-animation-works/
https://css-tricks.com/a-trick-that-makes-drawing-svg-lines-way-easier/
0:00 - Introduction
1:17 - Learn CSS & UI/UX
2:00 - Drawing the SVG Path in Figma
8:58 - HTML
11:24 - CSS
14:47 - JavaScript
18:20 - Parallax
20:58 - Final Thoughts
Let's get started!
#svg #animation #frontend
- - - - - - - - - - - - - - - - - - - - - -
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: http://twitter.com/designcoursecom
Join my Discord! https://discord.gg/a27CKAF
^-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!
Видео Awesome Scrolling SVG Line Drawing - How they did it! канала DesignCourse
Показать
Комментарии отсутствуют
Информация о видео
Другие видео канала
![The Fatal Flaw in 90% of Design & Coder Portfolios](https://i.ytimg.com/vi/clzRdnHUedY/default.jpg)
![Are you worth hiring as a UI/UX'er? Let's find out](https://i.ytimg.com/vi/yPbfXkw0BuI/default.jpg)
![Will ChatGPT Vision Replace Frontend Developers?](https://i.ytimg.com/vi/C2j3m6sEtVo/default.jpg)
![A New Web Design Trend Going Into 2024?](https://i.ytimg.com/vi/PiyO3hf3IXg/default.jpg)
![Figma's New Wrap Feature: From Design to Code](https://i.ytimg.com/vi/sdi8v0mV938/default.jpg)
![How to use Figma's new Dev Mode](https://i.ytimg.com/vi/wk9xSDNboZw/default.jpg)
![PayPal's Website is Freaking Ugly](https://i.ytimg.com/vi/txkNMoCMau8/default.jpg)
![I asked Framer AI to Build Me 5 Websites](https://i.ytimg.com/vi/hn1E3X4LATM/default.jpg)
![From Figma to Lottie - UI/UX Animations Made Easy](https://i.ytimg.com/vi/ZLSdqE-60hw/default.jpg)
![How to use AI in your UI/UX Flow](https://i.ytimg.com/vi/6e2oZ8Po4B4/default.jpg)
![How I finally stopped drinking alcohol 🍸](https://i.ytimg.com/vi/fVCnYzUu6EE/default.jpg)
![The Most Popular UI/UX Animation Technique](https://i.ytimg.com/vi/QiqSE2XcyDo/default.jpg)
![I Fixed 3 Broken Portfolios in Record Time](https://i.ytimg.com/vi/uYEyBGyJqPM/default.jpg)
![I Designed a Website in 56 Minutes](https://i.ytimg.com/vi/KbW6Kzil2eE/default.jpg)
![This is how you Refactor a UI Design](https://i.ytimg.com/vi/bFIIHOI5QoE/default.jpg)
![Use AI & JavaScript to Generate Amazing Color Schemes](https://i.ytimg.com/vi/Y5qR2pbKRVs/default.jpg)
![ProtoPie is Prototyping on Roids](https://i.ytimg.com/vi/6RpgS6H2FaY/default.jpg)
![Design a Highly Interactive Prototype with Figma & ProtoPie - Part 1](https://i.ytimg.com/vi/wnlCfLOpP60/default.jpg)
![Refactoring your UI/UX Design -- LIVE](https://i.ytimg.com/vi/rCM5-TrbG_o/default.jpg)
![Curvy SVG Text Scroll Animations - So Smooth!](https://i.ytimg.com/vi/94zyrvaFMhM/default.jpg)
![The Top 6 Best Websites of 2023 (so far)](https://i.ytimg.com/vi/oFz1RfCzKYs/default.jpg)