{"id":21146608,"url":"https://github.com/thounny/day_015","last_synced_at":"2026-05-20T14:04:34.955Z","repository":{"id":258049461,"uuid":"873314006","full_name":"thounny/DAY_015","owner":"thounny","description":"Scroll Animation with GSAP, ScrollTrigger, and Lenis","archived":false,"fork":false,"pushed_at":"2024-10-16T00:48:31.000Z","size":3484,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-14T14:10:06.736Z","etag":null,"topics":["css","gsap","html","javascript","lenis","lenis-scroll","scrolltrigger"],"latest_commit_sha":null,"homepage":"https://thounny.github.io/DAY_015/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thounny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-16T00:39:40.000Z","updated_at":"2024-10-16T00:48:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"8993eadb-3f4c-43eb-8619-fa58956b25b5","html_url":"https://github.com/thounny/DAY_015","commit_stats":null,"previous_names":["thounny/day_015"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thounny/DAY_015","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thounny%2FDAY_015","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thounny%2FDAY_015/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thounny%2FDAY_015/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thounny%2FDAY_015/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thounny","download_url":"https://codeload.github.com/thounny/DAY_015/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thounny%2FDAY_015/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266412319,"owners_count":23924486,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","gsap","html","javascript","lenis","lenis-scroll","scrolltrigger"],"created_at":"2024-11-20T08:58:20.059Z","updated_at":"2026-05-20T14:04:34.907Z","avatar_url":"https://github.com/thounny.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DAY_015 | Scroll Animation with GSAP, ScrollTrigger, and Lenis\n\nThis 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.\n\n## Inspiration\n\nThis 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.\n\n---\n\n## Project Preview\n\n![DAY_015 Animation](./assets/DAY_015_1.gif)\n\n## Time to Meet Sam\n\n![Time to Meet Sam](./assets/DAY_015_2.gif)\n\n---\n\n## GSAP in Action\n\n### What is GSAP?\n\n**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.\n\n### How GSAP is Used in This Project\n\nIn **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.\n\n---\n\n## Detailed Breakdown of the JavaScript\n\n### Key JavaScript Code:\n\n#### Smooth scrolling setup using Lenis\n\n```javascript\nconst lenis = new Lenis();\nlenis.on(\"scroll\", ScrollTrigger.update);\ngsap.ticker.add((time) =\u003e {\n  lenis.raf(time * 1000);\n});\ngsap.ticker.lagSmoothing(0);\n```\n\n- **Lenis** is used to create smooth scrolling behavior, while **GSAP** updates the animations as the user scrolls.\n\n#### Scroll-triggered animation\n\n```javascript\nScrollTrigger.create({\n  trigger: stickySection,\n  start: \"top top\",\n  end: `+=${pinnedHeight}`,\n  pin: true,\n  onUpdate: (self) =\u003e {\n    const progress = self.progress;\n    // Animation logic based on scroll progress\n  },\n});\n```\n\n- This **ScrollTrigger** setup defines the scroll-triggered behavior, pinning the section and controlling animations based on the scroll progress.\n\n#### Dynamic header text update\n\n```javascript\nconst introHeaders = [\n  \"\u003cspan\u003etime to\u003c/span\u003e be creative\",\n  \"\u003cspan\u003etime to\u003c/span\u003e design the future\",\n  \"\u003cspan\u003etime to\u003c/span\u003e meet thounny\",\n];\nfunction updateHeaderText() {\n  h1Element.innerHTML =\n    introHeaders[Math.min(currentCycle, introHeaders.length - 1)];\n}\n```\n\n- This function updates the header text dynamically as the user scrolls through different stages.\n\n---\n\n## How to Run\n\n1. **Clone the repository**:\n\n   ```bash\n   git clone https://github.com/thounny/DAY_015.git\n   ```\n\n2. **Navigate to the project directory**:\n\n   ```bash\n   cd DAY_015\n   ```\n\n3. **Open the `index.html` file** in your web browser:\n\n   - You can double-click the file in your file explorer, or\n   - Serve it using a local development server (e.g., Live Server in VSCode).\n\n---\n\n## Project Structure\n\n```bash\nDAY_015/\n│\n├── assets/\n│   └── you know the rest\n│   └── favicon.ico\n│   └── tone.jpg\n│   └── DAY_015_1.gif\n│   └── DAY_015_2.gif\n├── helveticaneu.woff2\n├── styles.css\n├── index.html\n└── script.js\n```\n\n---\n\n## Features\n\n- **Scroll-Triggered Animations**: Elements rotate and reveal themselves based on scroll position.\n- **Dynamic Header Updates**: The intro text changes dynamically as you scroll through the page.\n- **Smooth Scrolling**: Implemented using **Lenis** for a polished user experience.\n\n---\n\n## Technologies Used\n\n- **HTML5**: For document structure.\n- **CSS3**: For layout and styling.\n- **JavaScript (ES6)**: For handling animations and scroll events.\n- **GSAP (GreenSock Animation Platform)**: For creating smooth, high-performance animations.\n- **Lenis**: For smooth scrolling behavior.\n\n---\n\n## Author\n\n![Logo](./assets/index_dwn.gif)\n\n**Thounny Keo**  \nFrontend Development Student | Year Up United\n\n---\n\n![Logo](./assets/miku.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthounny%2Fday_015","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthounny%2Fday_015","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthounny%2Fday_015/lists"}