Construct superior touchdown web page for Apple iphone utilizing ThreeJS + ReactJS

Hey there,

I’ve seen lot of web site that render 3D mannequin which actually appears cool, So I wished to create comparable web site in React JS after which I stumbled upon the three JS. Right here, on this web site I’ve used react-three-fiber and react-three-drei to render 3D mannequin of iPhone and used GSAP for some cool scrolling animations.

You may see the Demo from right here
https://apple-iphone14.netlify.app/

For this challenge, I’ve used these libraries,
React JS (CRA)
GSAP for clean scrolling animations
Styled-Elements for styling
@react-three/fiber
@react-three/drei

I wished to make it extra interactive so I’ve added GSAP scroll-trigger for some results on scroll.

Right here is the tutorial on how I’ve created this web site!

Earlier than utilizing this web site for industrial functions, be sure to test the license of all photographs and different belongings.

I’ll attempt to enhance its pace and efficiency.
Be happy to strive completely different designs and animations with it,
Attempt to tweak a few of these results and you may also tag me on twitter or share your hyperlink within the feedback.

Any solutions are welcomed!

Thanks For Studying

Be happy to go to my youtube channel:
@CodeBucks

Comply with me on Twitter the place I am sharing a lot of helpful assets!
@code_bucks