https://github.com/thounny/day_015
Scroll Animation with GSAP, ScrollTrigger, and Lenis
https://github.com/thounny/day_015
css gsap html javascript lenis lenis-scroll scrolltrigger
Last synced: 27 days ago
JSON representation
Scroll Animation with GSAP, ScrollTrigger, and Lenis
- Host: GitHub
- URL: https://github.com/thounny/day_015
- Owner: thounny
- Created: 2024-10-16T00:39:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-16T00:48:31.000Z (over 1 year ago)
- Last Synced: 2025-03-14T14:10:06.736Z (over 1 year ago)
- Topics: css, gsap, html, javascript, lenis, lenis-scroll, scrolltrigger
- Language: JavaScript
- Homepage: https://thounny.github.io/DAY_015/
- Size: 3.32 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# DAY_015 | Scroll Animation with GSAP, ScrollTrigger, and Lenis
This project is part of my daily code challenge series, **DAY_015**, where I explore creating **scroll-triggered animations**. The project uses **GSAP**, **ScrollTrigger**, and **Lenis** to create smooth scrolling interactions that reveal and animate content as the user scrolls through the page. The animation features dynamic transitions, rotating elements, and smooth scrolling behavior.
## Inspiration
This project was inspired by the **Samuel Siebler Website** (**Time to Meet Sam**) (Honorable Mention on Awwwards). I wanted to replicate the smooth, interactive scroll animations seen on these sites using **GSAP** and **Lenis** for smooth scrolling and animation control.
---
## Project Preview
## Time to Meet Sam
---
## GSAP in Action
### What is GSAP?
**GSAP (GreenSock Animation Platform)** is a powerful JavaScript library used to create high-performance animations with smooth, precise control. It is widely used for advanced animations, including scroll-triggered interactions.
### How GSAP is Used in This Project
In **DAY_015**, animations are triggered as the user scrolls through the page. The hand container rotates dynamically, and the text and images fade in or out, depending on the scroll position. The intro header changes its text and content, creating a visually engaging and interactive experience.
---
## Detailed Breakdown of the JavaScript
### Key JavaScript Code:
#### Smooth scrolling setup using Lenis
```javascript
const lenis = new Lenis();
lenis.on("scroll", ScrollTrigger.update);
gsap.ticker.add((time) => {
lenis.raf(time * 1000);
});
gsap.ticker.lagSmoothing(0);
```
- **Lenis** is used to create smooth scrolling behavior, while **GSAP** updates the animations as the user scrolls.
#### Scroll-triggered animation
```javascript
ScrollTrigger.create({
trigger: stickySection,
start: "top top",
end: `+=${pinnedHeight}`,
pin: true,
onUpdate: (self) => {
const progress = self.progress;
// Animation logic based on scroll progress
},
});
```
- This **ScrollTrigger** setup defines the scroll-triggered behavior, pinning the section and controlling animations based on the scroll progress.
#### Dynamic header text update
```javascript
const introHeaders = [
"time to be creative",
"time to design the future",
"time to meet thounny",
];
function updateHeaderText() {
h1Element.innerHTML =
introHeaders[Math.min(currentCycle, introHeaders.length - 1)];
}
```
- This function updates the header text dynamically as the user scrolls through different stages.
---
## How to Run
1. **Clone the repository**:
```bash
git clone https://github.com/thounny/DAY_015.git
```
2. **Navigate to the project directory**:
```bash
cd DAY_015
```
3. **Open the `index.html` file** in your web browser:
- You can double-click the file in your file explorer, or
- Serve it using a local development server (e.g., Live Server in VSCode).
---
## Project Structure
```bash
DAY_015/
│
├── assets/
│ └── you know the rest
│ └── favicon.ico
│ └── tone.jpg
│ └── DAY_015_1.gif
│ └── DAY_015_2.gif
├── helveticaneu.woff2
├── styles.css
├── index.html
└── script.js
```
---
## Features
- **Scroll-Triggered Animations**: Elements rotate and reveal themselves based on scroll position.
- **Dynamic Header Updates**: The intro text changes dynamically as you scroll through the page.
- **Smooth Scrolling**: Implemented using **Lenis** for a polished user experience.
---
## Technologies Used
- **HTML5**: For document structure.
- **CSS3**: For layout and styling.
- **JavaScript (ES6)**: For handling animations and scroll events.
- **GSAP (GreenSock Animation Platform)**: For creating smooth, high-performance animations.
- **Lenis**: For smooth scrolling behavior.
---
## Author
**Thounny Keo**
Frontend Development Student | Year Up United
---
