Macbook Landing Page - React & GSAP banner

Macbook Landing Page - React & GSAP

5 devlogs
4h 2m 31s

An Apple.com-inspired design for a MacBook landing page made using React and GSAP for animations.
I followed a tutorial to build this, since i dont have a lot of knowledge about animations and wanted to fine tune my react skills.

This project uses AI

I’m using AI to improve my productivity. I’ll be using an IDE with built-in AI called Junie from Webstorm.

Demo Repository

Loading README...

Sinura

I have implemented the animations for the M4 mask section (first comes the video, and then the M4 text mask comes on top of it)
And the performance section was built with the expanding animation.

Attachment
Attachment
Attachment
0
Sinura

Alright!!! So the window switching section is implemented successfully. Now, when I select a silver MacBook, the model changes color and changes the size according to the scale of the product

Hang tight! for more logs πŸ˜ŽπŸ§‘β€πŸ’»

Attachment
Attachment
0
Sinura

Implemented the studio lighting to the MacBook model, using three.js. Its starting to look goooooood 😎.
Standby for more updates πŸ§‘β€πŸ’»

Attachment
0
Sinura

Added three.js and implemented a small box with orbit controls to move it around.
Let’s meet up in the next update, folks πŸ§‘β€πŸ’»

Attachment
0
Sinura

Just built the nav bar section of the website. Can’t wait to finish this masterpiece ✨

Attachment
0