Master Webgl with React Three Fiber and Threejs : course 3

Master Webgl effects with React Three Fiber and animations with React and Greensock (GSAP)

What you'll learn:
Create the Scene in React-Three-Fiber
Use shaderMaterial with React-Three/drei
Use useFrame Hook
Use useLoader Hook to add Texture
Passing props to components
Animate SVG on scroll with ScrollTrigger
Parallaxing elements using ScrollTriger and Greensock(GSAP)
Create a SplitText function to split each line into words
Handle mouse event in react
Target and Animate elements on scroll using React and Greensock
Styled your component with styled-components
Learn about geometry and meshes

Requirements:
Html, css and Javascript knowledge
Node installed on your local machine
Knowledge of React

Description:
What will you build ?
In this course we will Create a meaningful interative experience with React and GSAP and also a couple of webgl effects using react-three-fiber and threejs. This course will go through underlying core concepts of three.js including scene, geometry, materials and textures.
We will be using react-three fiber to explore how we can create shaders.
We will create a Wave Motion Effect on images with Three.js and i will explain how to make waves on a 3D plane with Three.js using simplex noise.
We will also create some really cool parallaxing effects, staggered text animation and interactions on scroll.

This course is for people who care about Design and Development.
This course is also for those who want to learn webgl and in particular React-Three-fiber.
This course is also for people who love fine tune animations, motion design and want to learn how to create a meaningful interative experience with React, GSAP (Greensock) and React-Three-Fiber.

This is a list of the topics you'll learn in this course:
• Create the Scene in React-Three-Fiber
• Use shaderMaterial
• Use useFrame Hook
• Use useLoader Hook to add Texture
• Passing props to components
• Animate SVG on scroll with ScrollTrigger
• Parallaxing elements using ScrollTriger and Greensock(GSAP)
• Create a SplitText function to split each line into words
• Handle mouse event in react
• Target and Animate elements on scroll using React and Greensock
• Styled your component with styled-components

Who this course is for:
This course is for who want to master Webgl effects with React Three Fiber and animations with React and Greensock (GSAP)
This course is for people who care about Design and Development.
This course is also for people who love fine tune animations, motion design and want to learn how to create a meaningful interative experience with React-three-fiber and GSAP (Greensock).
React developers looking to add Three js to their skillset

More Info