Animating Michael Scott's Parkour Flip on Scroll with React

Опубликовано: 01 Январь 1970
на канале: Let The Devs Cook

10,105

518

Create an engaging scroll animation in React. We will be bringing to life an epic moment from 'The Office' – the Parkour flip by Michael Scott. This tutorial is inspired by the slick animation effects seen on Apple's product pages, and I'll guide you through every step.We'll cover everything from setting up your canvas to handling scroll events and controlling image sequences for smooth animation. So let's dive right in and bring the Dunder Mifflin magic to our code!

Github repo:
https://github.com/sanjayrjs16/Parkou...

Timestamps:
0:00 - Introduction: Apple's airpods website
0:21 - What we're building
0:44 - Understanding how it works.
1:33 - Extracting frames from the video
2:16 - Basic react app setup with boilerplate code
3:55 - Canvas setup
5:50 - Adding scroll event listeners
8:18 - Minor error correction (className)
8:33 - Loading a single image onto canvas
10:04 - Image distortion issue and it's fix
11:29 - Preloading images
15:11 - Preloading images - optimising with Promise.all
17:22 - Diagram - logic for linking scroll % to animation.
18:52 - handleScroll function (animate on scroll)
23:50 - Adding a text to say "Parkour!"
26:44 - Conclusion

Do share your feedbacks in the comments below. Don't forget to like, share, and subscribe if you find this video helpful. Your support helps me create more content like this!

#react #javascript #frontend #frontenddeveloper #css #animation #webdevelopment #theoffice #office #reactjs #reactjstutorial #html

‪@TheOffice‬ ‪@NBC‬