Тёмный

How to Create an Awesome Horizontal Scroller 

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

designcourse.com/af 👈 AdvancedFrontends - Use code "INTERACTIVITY" for 30% off! Only good until 9/27!
-- Today, I'm sharing with you a lesson video from my Advanced Frontends course. It will walk you through how to create a horizontal scroller layout using JavaScript, the GreenSock Animation Platform (GSAP), and Lenis smooth scroll.
0:00 - Intro
1:09 - HTML
7:00 - CSS Overview
8:30 - JavaScript & GSAP
18:34 - Final Thoughts
Let's get started!
#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!

Хобби

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

 

15 июн 2024

Поделиться:

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 25   
@DesignCourse
@DesignCourse 8 месяцев назад
I can't wait to show you all the final project in the course. Be sure to join up, just 24hr left! designcourse.com/af
@t20sgrunt36
@t20sgrunt36 8 месяцев назад
Getting your moneys worth on GSAP. Been loving the vids. 🤘
@davidade6520
@davidade6520 8 месяцев назад
Awesome.
@raycruz3094
@raycruz3094 8 месяцев назад
Awesome awesome stuff
@edoardoguido1688
@edoardoguido1688 8 месяцев назад
How to deal with mobile if I don’t want it to be horizontally scrollable, but vertical?
@maheh360
@maheh360 8 месяцев назад
Sir you course is🔥 👑❤😍😍 but it's not affordable for me
@jacksparrow4628
@jacksparrow4628 8 месяцев назад
Sir I don't know how to buy it, all the payment options are not available for me, i dont own a credit card and I don't have a PayPal account and neither do my parents, I want to purchase this, is there another way?
@user-oz3hc6lj2e
@user-oz3hc6lj2e 4 месяца назад
we dont have left for start value , so how u used it ?
@JJEccles
@JJEccles 5 месяцев назад
May I ask, what plugin or option are you using for VS code where it helps out with a suggestive autocomplete when typing code?
@michiii555
@michiii555 2 месяца назад
did u find it? D:
@jeremy-percy
@jeremy-percy 19 дней назад
its code pilot
@paulopma
@paulopma 8 месяцев назад
Hello! I enrolled for the UX/UI course. I think it would be nice to have a Discord for your students and tutors to discuss things
@DesignCourse
@DesignCourse 8 месяцев назад
We do. When you visit the course cirruculum page on designcourse.com, you should see a discord server button on the top right if you're on desktop.
@paulopma
@paulopma 8 месяцев назад
@@DesignCourseFound it. Thx! :)
@ramprasadsarkar2739
@ramprasadsarkar2739 8 месяцев назад
nice
@troyfrancois8012
@troyfrancois8012 8 месяцев назад
How can I shift my course if I purchased the wrong course by accident? I wanted the Advanced Frontend Course.
@carsonwyndham9693
@carsonwyndham9693 8 месяцев назад
Very cool, now let's make it mobile friendly. This looks great on desktop but kinda falls apart on the mobile device. I would like to know more about mobile responsiveness and how these cool JS tools will adapt
@DesignCourse
@DesignCourse 8 месяцев назад
It's easily doable with media queries, and Greensock's matchMedia.
@cband8030
@cband8030 5 месяцев назад
@@DesignCoursethis is the exact problem I’m facing with a current project. Your comment just saved me a ton of time.
@marklnz
@marklnz 8 месяцев назад
This is a pretty cool animation, but I have an issue with it...isn't it an accessibility issue to be scrolling content horizontally when the user is attempting to scroll *vertically*? At the very least, it's a bad UX right? If I scroll vertically with my mouse wheel I expect the page to scroll in the vertical direction, but you've intercepted that, basically, and modified that to scroll horizontally instead. Personally, as a user, I *hate* it when that happens. Vertical scrolling is vertical scrolling, not horizontal.
@alzaresh
@alzaresh 8 месяцев назад
There isn't a horizontal scroll wheel. I think it's fine so long as it's only vertical or only horizontal.
@marklnz
@marklnz 8 месяцев назад
@@alzaresh There's a horizontal scroll on my mouse! :P But sure, I get that it's not common. The point still holds though - vertical is vertical, not horizontal.
@maneeeshtejsai-ft4ee
@maneeeshtejsai-ft4ee 26 дней назад
It grabs user attention though
@crazykidscomedy
@crazykidscomedy 8 месяцев назад
Looks as if he invented animation 😳
@xAndre-d-Moraes
@xAndre-d-Moraes 7 месяцев назад
AdvancedFrontends promise.
Далее
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 904 тыс.
Awesome Scrolling SVG Line Drawing - How they did it!
21:45
FUN&SUN | Update 0.29.0 Trailer | Standoff 2
02:32
Просмотров 942 тыс.
Продаю тачку из гаража мечты :(
52:18
MacBook Air Японский Прикол!
00:42
Просмотров 120 тыс.
Create an infinite horizontal scroll animation
32:01
Просмотров 175 тыс.
How to create 3D Website Designs With No Code
4:24
Просмотров 466 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
The Coolest Animated SVG Filter Effect
24:12
Просмотров 26 тыс.
GSAP & ScrollTrigger Crash Course for Webflow
16:09
Просмотров 28 тыс.
Learn GSAP In 23 Minutes
23:22
Просмотров 196 тыс.
СМОТРИ КУДА СТАВИШЬ НОГИ
0:11
respect 💯🤯😷😱
0:27
Просмотров 9 млн