Create a Sick Horizontal Scroll Animation | GreenSock / JS

-- Today, I'm going to show you how to create a sleek horizontal scrolling animation with the help of JavaScript and GSAP. Integrate this on your next project and you'll impress your parents, I guarantee it! :|

Thanks to CassieCodes from Greensock for helping me figure some of this stuff out!

Codepen demo:

0:00 - Intro
0:50 - HTML and CSS Overview
3:59 - JavaScript & GSAP
12:16 - Final result

Let's get started!

#javascript #frontend #uiux

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

What other types of interactive examples would you like to see?

[oliwia_haja]

what I always love about this kind of tutorials is that the video's lenght is about 15 minutes and it takes me like few days to apply it to my project hahaha
thanks for the work!

[DataSet]

This is going to impress my grandma for sure

[kashif_i]

Always love to see your work. Going to sign up for the advance course.

[jan.k.]

Awesome idea, thanks for the inspiration.

To avoid seeing a misalignment in the progress bar, even though the middle element is centered, or it even not reaching 100% at all, here is my solution.
Remove the progress bar animation completely and work with the onUpdate callback function in the scrollTrigger of scrollTween to couple the width with the animation progress:
----
...,
scrollTrigger: {
...,
onUpdate: (self) => {
mask.style.width = Math.min(self.progress * 100, 100) + "%";
}
}
----


Hope it helps

[meslzy]

Bro i was trying to do it last week, wallah i luv you!!

[yusufhendricks]

Thanks alot, been searching everywhere for this effect.

[SvenBledt]

I learned a lot from your video. Thanks for your hard work and good explanation. Youre always the first address when i have to solve some problems.

[cmnweb]

Justo estaba ocupando hacer esto hoy, 5 estrellas por el servicio 😎

[ratzch]

So cool 😎 already bought your css course 😍 what i still don't know: how to add this to a wordpress site 🙃

[KarolinaZielińska-ge]

How to make this <svg> element with mask using Figma?

[reyanarshad]

Hi! I want to know that what if we want 6 sections hot manage that
xPercent: -100 * (sections.length - 1),
What values to change???

[Atractiondj]

how about to do vertical & horizontal fullpage scroll like in fullpage js horizontaly scroll but with GSAP?

[andeederek]

How much is the new advanced front end course gonna be

[SingaporeMathsAcademyUK]

How works one integrate this into WordPress?

[dawidmarkiewicz]

how to remove this subtitles scroller-start, end

[tsarprince]

Great content as always but no offence but .. ayy .... ayy ... aaayyyy ...