An interactive and visually engaging scroll-based animation project built using HTML, CSS, JavaScript, GSAP, ScrollTrigger, and a touch of Lenis, inspired by one of Awwwards Websites.
As the user scrolls, different skill elements elegantly transition from a blurry, hidden state to clear visibility, creating a smooth and dynamic storytelling experience.
Scrolling back reverses the effect, smoothly hiding the elements again.
- Awwwards-style animation inspired
- Scroll-triggered animations using GSAP + ScrollTrigger
- Skill sections fade in from blur as they enter the viewport
- Reverse animations when scrolling back up
- Smooth scrolling powered by Lenis
- Clean, modern UI
- HTML5 β structure and markup
- CSS3 β styling, blur effects, and transitions
- JavaScript (ES6) β logic and DOM control
- GSAP β animation engine for fluid transitions
- ScrollTrigger β scroll-based animation control
- Lenis β for buttery-smooth scrolling behavior
π View Live Project
To run this project locally:
# Clone this repository
git clone https://github.com/your-username/smooth-scroll-reveal.git
# Navigate into the project folder
cd smooth-scroll-reveal
# Open index.html in your browser