I put together a 3D can model in Blender, designed the website and labels in Figma, and then used GSAP with React-three-fiber (React-three-fiber is a React renderer for Three.js) to bring it all to life with cool animations for the models and text.
- React, TypeScript, Tailwind
- GSAP, React-Three-Fiber
- Blender, Figma
I want to split this section into three parts to discuss my experience in detail with the following tools:
Blender was definitely the toughest part of this project since I’d never used it before. But once I dove in, I started seeing just how powerful it is. It opened my eyes to all the cool stuff I could build, and now I’m already imagining some exciting projects I could tackle with it in the future.
Creating_Coke_can_in_Blender_for_GitHub.mp4
Figma was a lot easier for me since I have plenty of experience with it. I used it to design a custom layout for my website, which saved me a ton of time when I started coding. Plus, I created all the labels for the cans in Figma too.
Creating_Coke_labels_in_figma_for_GitHub.mp4
I used GSAP for all the can animations, and it was a lot of fun experimenting with different timelines. For example, the Vanilla Coke has four unique animations in the same scene, each playing one after another as you scroll through the site.