react-scroll-media
Advanced tools
+1
-1
| MIT License | ||
| Copyright (c) 2024 Thanniru Sai Teja | ||
| Copyright (c) 2026 Thanniru Sai Teja | ||
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy |
+1
-1
| { | ||
| "name": "react-scroll-media", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "Production-ready scroll-driven image sequence rendering component for React", | ||
@@ -5,0 +5,0 @@ "license": "MIT", |
+24
-1
@@ -26,2 +26,9 @@ <div align="center"> | ||
| <div align="center"> | ||
| <img src="https://github.com/iam-saiteja/react-scroll-media/blob/master/demo.gif?raw=true" alt="React Scroll Media Demo" width="600" /> | ||
| <p><em><strong>Above:</strong> A 60fps scroll-driven sequence. The animation frame is tied 1:1 to the scroll position, allowing for instant scrubbing and pausing at any angle.</em></p> | ||
| </div> | ||
| <br /> | ||
| ## ⨠Features | ||
@@ -543,2 +550,9 @@ | ||
| <div align="center"> | ||
| <img src="https://github.com/iam-saiteja/react-scroll-media/blob/master/demo-213.gif?raw=true" alt="React Scroll Media Technical Demo" width="600" /> | ||
| <p><em><strong>Technical Demo:</strong> This visualization shows the direct correlation between the scrollbar position and the rendered frame. The component calculates the exact frame index based on the percentage of the container scrolled, ensuring perfect synchronization without "scroll jacking".</em></p> | ||
| </div> | ||
| <br /> | ||
| ### š§ Technical Breakdown | ||
@@ -558,4 +572,13 @@ | ||
| This gives a precise **0.0 to 1.0** value tied to the pixel position of the scrollbar. | ||
| This gives a precise **0.0 to 1.0** value tied to the pixel position of the scrollbar. This value is then mapped to the corresponding frame index: | ||
| ```ts | ||
| frameIndex = Math.floor(progress * (totalFrames - 1)) | ||
| ``` | ||
| This approach ensures: | ||
| * **Zero Jitter**: The canvas position is handled by the browser's compositor thread (CSS Sticky). | ||
| * **Native Feel**: Momentum scrolling works perfectly on touchpads and mobile. | ||
| * **Exact Sync**: The frame updates are synchronized with the scroll position in a `requestAnimationFrame` loop. | ||
| <br /> | ||
@@ -562,0 +585,0 @@ |
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
Network access
Supply chain riskThis module accesses the network.
Found 1 instance in 1 package
196087
0.68%632
3.78%