Latest Threat Research:SANDWORM_MODE: Shai-Hulud-Style npm Worm Hijacks CI Workflows and Poisons AI Toolchains.Details →
Socket
Book a DemoInstallSign in
Socket

react-scroll-media

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-scroll-media - npm Package Compare versions

Comparing version
1.0.1
to
1.0.2
+1
-1
LICENSE
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

{
"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",

@@ -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 @@