https://github.com/bilovodskyi/3d-coca-cola

Redesigned the Coca-Cola website using Figma for UI/UX, with custom 3D models created in Blender. Integrated animations with GSAP and React Three Fiber in a React environment.
https://github.com/bilovodskyi/3d-coca-cola

blender figma gsap threejs

Last synced: about 2 months ago
JSON representation

Redesigned the Coca-Cola website using Figma for UI/UX, with custom 3D models created in Blender. Integrated animations with GSAP and React Three Fiber in a React environment.

• Host: GitHub
• URL: https://github.com/bilovodskyi/3d-coca-cola
• Owner: Bilovodskyi
• Created: 2024-10-29T04:54:34.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2024-10-29T05:03:02.000Z (3 months ago)
• Last Synced: 2024-10-29T06:17:12.155Z (3 months ago)
• Topics: blender, figma, gsap, threejs
• Language: TypeScript
• Homepage: https://3d-coca-cola.vercel.app
• Size: 1.4 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 📚 About

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.

# 🛠️ Tech Stack

-   React, TypeScript, Tailwind

-   GSAP, React-Three-Fiber

-   Blender, Figma

# 🔍 Details

I want to split this section into three parts to discuss my experience in detail with the following tools:

## 1. Blender

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.

https://github.com/user-attachments/assets/5bf594a5-7ffa-489c-9e51-4ab818ca4439

## 2. Figma.

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.

https://github.com/user-attachments/assets/d89eb2f7-1e5a-4b2a-9bcb-eac6a701111f

## 3. GSAP.

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.