{"repo":"jscottsmith/react-scroll-parallax","free":true,"listed":false,"github":"https://github.com/jscottsmith/react-scroll-parallax","clone":"git clone https://github.com/jscottsmith/react-scroll-parallax.git","description":"🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.","language":"TypeScript","stars":2985,"topics":["react","parallax","scroll","component","animation","banner","hooks","effects"],"license":"MIT","category":"ui-components","readme_excerpt":"React Scroll Parallax React hooks and components to create scroll-driven parallax effects for banners, images, or any other DOM elements. Built on Parallax Controller, powered by the Web Animations API where each element is driven by a ScrollTimeline or ViewTimeline. Apply translate, rotate, scale, and opacity keyframes with scroll progress on the compositor and don't block the main thread. Install With npm Try 4.0 Beta Uses the latest Parallax Controller built with Web Animations API for scroll-driven animations. If you're upgrading from V3, here's a migration guide to the v4 beta. Example Create effects with a hook: or with a component: Getting Started Read the documentation for setup and usage instructions. - Usage - Usage with NextJS 13 - How it works Demos - Storybook v3 - Source Code - Demo 1 - Source Code - Horizontal Scroll - Source Code - Full Page Banner - Source Code - Demo 2 - Source Code (old 2.x version) Docs: Hooks - useParallax() - useParallaxController() Docs: Components - - -","default_branch":null,"files":null,"tree":[],"storefront":"/r/jscottsmith","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/jscottsmith/react-scroll-parallax/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}