Learn React Three Fiber + GSAP: Create Stunning 3D Animations for the Web
Автор: Thabish Kader
Загружено: 2023-03-16
Просмотров: 11823
Code (Give it a ⭐️ if you think it is helpful): https://github.com/Thabish-Kader/r3f-...
Live Demo : https://r3f-scroll-three.vercel.app/
Buy me a Coffee: https://www.buymeacoffee.com/takdevelopr
In this video we will be diving into the world of 3D web animation using React Three Fiber and GSAP. With the power of these two libraries combined, we will create a stunning 3D animated website that reacts to user scrolling.
Along the way, we will explore some of the fundamental concepts of 3D web animation, including camera placement, lighting, and material properties. By the end of this tutorial, you will have a solid understanding of how to create visually stunning 3D animations that bring your websites to life.
0:00 demo
00:40 intial config
07:38 importing the model
12:00 typedefinitions
13:00 bringing the model to the canvas
18:11 camera positions
21:00 lighting and environment
26:30 importing gsap
28:30 creating sections/components
34:10 gsap animations
35:55 gsap Scroll trigger
40:30 explaining scroll trigger
47:55 explaining how i got the position values
59:48 explaining how scroll trigger works again !!!
01:01:31 Final project after stylings
Доступные форматы для скачивания:
Скачать видео mp4
-
Информация по загрузке:
