A modern and visually stunning front-end project inspired by Awwwards-winning websites. This project showcases a variety of advanced web animations and interactive effects, built with the powerful GreenSock Animation Platform (GSAP) and Locomotive Scroll.
(Note: Please replace this with a screenshot or a GIF of your project!)
This project is a creative exploration of modern web design and animation techniques. The goal was to build a fluid, engaging, and memorable user experience similar to those celebrated on Awwwards. It leverages GSAP for complex timeline-based animations and Locomotive Scroll for smooth, parallax-style scrolling effects.
Key learning and implementation points include:
- Creating a seamless page loader.
- Implementing a custom mouse cursor.
- Triggering animations on scroll events.
- Choreographing text and image reveals for a dynamic feel.
This project was built using a curated set of modern front-end technologies:
- HTML5
- CSS3
- JavaScript (ES6+)
- GSAP (GreenSock Animation Platform): A professional-grade JavaScript library for high-performance animations.
- Locomotive Scroll: A library that provides smooth scrolling with parallax effects.
The website includes a range of carefully crafted features to enhance the user experience:
- Preloader Animation: A stylish loading screen that smoothly transitions into the main content.
- Custom Cursor Follower: An interactive cursor that changes based on hoverable elements.
- Smooth Scrolling: Fluid scrolling powered by Locomotive Scroll, creating a premium browsing feel.
- Scroll-Triggered Animations: Elements, text, and images animate into view as the user scrolls down the page.
- Text Reveal Effects: Engaging typography animations that draw the user's attention.
- Hover-Activated Image Effects: Interactive effects on links and images upon mouse hover.
- Fully Responsive Design: A layout that adapts gracefully to different screen sizes, from mobile devices to desktops.
To get a local copy up and running, follow these simple steps.
You only need a modern web browser. No complex dependencies or build tools are required.
-
Clone the repository:
git clone https://github.com/dhlananhh/GSAP-Awwwards-Website.git
-
Navigate to the project directory:
cd GSAP-Awwwards-Website -
Open the project: Simply open the
index.htmlfile in your web browser.For the best experience (to avoid potential browser restrictions), it is recommended to serve the files using a local server. If you have VS Code, you can use the Live Server extension.
Distributed under the MIT License. See LICENSE for more information.
- Inspiration from various Awwwards websites.
- GreenSock for the incredible GSAP library.
- The developers behind Locomotive Scroll.