GSAP Cocktail

This website was built as part of a follow along video tutorial from JavaScript Mastery which can be found at:

https://www.youtube.com/watch?v=AW1yfBKRMKc

The course teaches you how to use Green Sock Animation Platform (AKA GSAP) to implement stunning animations onto your website.

The premise here is a cocktail website for a bar in America. GSAP is used to do the following:

• Play the video of ice falling into a cocktail glass as the user scrolls
• Add a paralax effect to the leaves on the screen
• Fade words, characters and lines into view as the user enters different sections of the page
• Add an image mask that expands into a full image when the user scrolls further down the page
• Provide transitions when navigating from one cocktail to another in the menu section

Tools

The site was built using the latest versions of React, Vite and GSAP. It also uses TypeScript as opposed to JavaScript which was used in the tutorial.

To Do

The site is complete and matchaes the end product of the tutorial. However, there are some changes which could be made to improve the site. Thes include:

• Updating the cocktail list. One of my hobbies is making cocktails and some of the cocktails mentioned on this page don't match the imagery. More accurate cocktail names / images would be more appropriate.
• Improve scrolling effect on some of the leaves.
• Attempt to make the video in the hero section stand out more instead of appearing behind the noisy background.
• See if there are more GSAP animations that could be added to this site.