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š