Mohito Website banner

Mohito Website

7 devlogs
2h 19m 54s

This is a cocktail website with smooth animations. This is my first project which uses GSAP. This project will help me learn more about gsap timeline, scroll animations and overall animation. This project has two sections and user can scroll from …

This is a cocktail website with smooth animations. This is my first project which uses GSAP. This project will help me learn more about gsap timeline, scroll animations and overall animation. This project has two sections and user can scroll from one section to another with a video playing with the scroll.

Demo Repository

Loading README...

Sam

Shipped this project!

Hours: 2.04
Cookies: 🍪 10
Multiplier: 4.95 cookies/hr

I’ve worked on a cocktail website that has smooth animations and parallax effects . The website uses GSAP for the animations. If the owner of the website want’s to change the details they can easily do that in the index.js in constants folder.

My learnings from this project:-

  • GSAP timelines and sequencing
  • Spliting Text
  • Scroll-based animations
  • Better control over UI motion
  • Thinking about animation as part of UX, not decoration
Sam

I have updated the readme file. You can now read the readme file. You can check out the website.

Attachment
0
Sam

Fixed an issue with the mobile device. The video wasn’t going all the way down in the mobile view. It took longer than expected to fix this issue. Now I’m ending this project and gonna start on a new one.

Attachment
0
Sam

Just added the cocktails section where you can see the most popular and loved cocktails. Also added leaves at the bottom with animations with animations for a jungle like vibe.

Attachment
0
Sam

Added the main video in my website. It animates with scroll and just looks amazing. Next i am going to work on the cocktails section.

Attachment
0
Sam

I’m currently following a tutorial on YouTube. I have created the hero section with navbar and text but there’s still more to add. I am hope to learn a decent about gsap with this project

Attachment
0