Skip to content

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.

Notifications You must be signed in to change notification settings

ayythrva/skill-showcasing-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

5 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

🎨 Smooth Scroll Reveal Animation

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.


✨ Features

  • 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

πŸ› οΈ Technologies Used

  • 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

πŸš€ Live Demo

πŸ”— View Live Project


πŸ“¦ Installation & Setup

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

About

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.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published