{"id":24803286,"url":"https://github.com/maheshpaulj/react-smooth-scroll","last_synced_at":"2026-04-13T01:40:35.765Z","repository":{"id":266010890,"uuid":"897106870","full_name":"maheshpaulj/react-smooth-scroll","owner":"maheshpaulj","description":"This repository demonstrates how to implement smooth scrolling in a React application using the Lenis library. The project smoothens both manual scrolling and programmatic scrolling for a polished user experience.","archived":false,"fork":false,"pushed_at":"2024-12-02T03:27:30.000Z","size":182,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-30T05:26:57.354Z","etag":null,"topics":["lenis","lenis-scroll","react","reactjs","smooth-scrolling"],"latest_commit_sha":null,"homepage":"https://genuine-biscotti-f72e85.netlify.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maheshpaulj.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-12-02T03:18:06.000Z","updated_at":"2024-12-02T03:27:34.000Z","dependencies_parsed_at":"2024-12-02T08:46:49.234Z","dependency_job_id":null,"html_url":"https://github.com/maheshpaulj/react-smooth-scroll","commit_stats":null,"previous_names":["cityisbetter/react-smooth-scroll","maheshpaulj/react-smooth-scroll"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshpaulj%2Freact-smooth-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshpaulj%2Freact-smooth-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshpaulj%2Freact-smooth-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maheshpaulj%2Freact-smooth-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maheshpaulj","download_url":"https://codeload.github.com/maheshpaulj/react-smooth-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407763,"owners_count":20610232,"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","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":["lenis","lenis-scroll","react","reactjs","smooth-scrolling"],"created_at":"2025-01-30T05:24:40.028Z","updated_at":"2026-04-13T01:40:30.735Z","avatar_url":"https://github.com/maheshpaulj.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Smooth Scroll with Lenis\nThis repository demonstrates how to implement smooth scrolling in a React application using the Lenis library. The project smoothens both manual scrolling and programmatic scrolling for a polished user experience.\n\n# Features\nSmooth Manual Scrolling: Enhances the scrolling experience for mouse wheel, touchpad, and touch devices.\nSmooth Programmatic Scrolling: Scroll to specific sections of the page using navigation buttons.\nCustomizable Easing and Duration: Fine-tuned settings for fluid scroll stops.\nDemo\nCheck out the live demo: [Smooth Scroll Demo](https://genuine-biscotti-f72e85.netlify.app/)\n\n# Installation\nClone the Repository\n```git clone https://github.com/YourGitHubUsername/react-lenis-smooth-scroll.git\ncd react-lenis-smooth-scroll\n```\n## Install Dependencies\n```\nnpm install\n```\n## Usage\nRun the App\nStart the development server:\n```\nnpm start\n```\nOpen your browser at http://localhost:3000.\n\n# Implementation Overview\n## Lenis Initialization\nThe Lenis library is configured to smooth both manual and programmatic scrolling with customizable easing and duration.\n\n## Key Configuration\njavascript\n```\nlenis.current = new Lenis({\n  duration: 1.2, // Smooth scroll duration\n  easing: (t) =\u003e 1 - Math.pow(1 - t, 3), // Cubic easing for smooth stops\n  smooth: true,\n  smoothTouch: true, // Smooth touch scrolling\n});\n```\n## Programmatic Scrolling\nButtons in the navigation bar use the scrollTo method provided by Lenis to smoothly navigate to specific sections:\n```\nconst scrollToSection = (id) =\u003e {\n  const element = document.getElementById(id);\n  lenis.current.scrollTo(element);\n};\n```\n## File Structure\n```\nreact-lenis-smooth-scroll/\n│\n├── src/\n│   ├── App.js        # Main application component\n│   ├── App.css       # Styles for the application\n│   └── index.js      # Entry point\n│\n├── public/           # Static files\n├── package.json      # Dependencies and scripts\n└── README.md         # Documentation\n```\n\n## Customization\n- Duration: Adjust the duration property in Lenis initialization to change scroll speed.\n- Easing: Modify the easing function to experiment with different scroll behaviors.\n## Dependencies\n- React\n- Lenis\n\n# Contributing\nContributions are welcome! If you have ideas to improve this implementation, feel free to open a pull request.\n\n# License\nThis project is licensed under the [MIT License](./LICENSE).\n\n# Author\nCreated by Mahesh Paul J.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaheshpaulj%2Freact-smooth-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaheshpaulj%2Freact-smooth-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaheshpaulj%2Freact-smooth-scroll/lists"}