2 Ways to Make a Scroll Parallax in React

Live demo / Source code:

00:00 Intro
00:29 Layout
1:33 GSAP explained
2:53 GSAP code
9:58 Framer Motion explained
11:24 Framer Motion code
16:32 Outro

Thanks for watching!

#react #nextjs #awwwards #gsap #framer #motion

[evanz]

Awsome, thanks a lot Olivier ! Have a question, when do you plan to release the animation course you are working on? Do you already know the approximate date? Cheers!

[arkapravabera]

Sir your videos are SIMPLY amazing . I learned a lot from your videos . Just wanted to say thank you for all the knowledge you shared . PLEASE upload more . <3

[hassaneljebyly]

7:33 It's because inline elements are not transformable, change their display properties to block or block-inline(same as block but doesn't add a line break), despite, great content, very inspirational been grinding through these for days now :)

[jorgemachuca]

thank you for sharing your knowledge, master jedi!

[Nahhhhhhth]

Thank you for another incredible video!🔥

Big hug!

[alonadaphna]

Great video as always! I have a question about your blog. What library did you use for the markdown? Big thanks! You're an inspiration.

[tipoidarraga]

Hi Olivier your content is excellent, what is the path you took to get to this level?

[davidlintin]

I think I finally get it 😅 6th times the charm

[arvindcool]

Great video. But i have a question one of the rules of hook is not to be called inside a loop. How does it work here?
Is it because of the fixed number and the same order on each render? Or

[ismailechchaouny]

awesome, but which is better using Gsap and locomotive scroll v5 or just Gsap Enough?

[nicolettifps]

im starting to learn animations and your chanel is very awesome for us non native, thanks for speak slowly, and you content is amazing, for the first timing i watch a video and say, oh, i got. audhuadhw