@ohos-ports/basicscroll 3.0.4-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobias Reich
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,594 @@
+# basicScroll
+
+[![Donate via PayPal](https://img.shields.io/badge/paypal-donate-009cde.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CYKBESW577YWE)
+
+Standalone parallax scrolling for mobile and desktop with CSS variables.
+
+basicScroll allows you to change CSS variables depending on the scroll position. Use the variables directly in your CSS to animate whatever you want. Highly inspired by [skrollr](https://github.com/Prinzhorn/skrollr) and [Reactive Animations with CSS Variables](http://slides.com/davidkhourshid/reactanim#/).
+
+## Contents
+
+- [Demos](#demos)
+- [Tutorials](#tutorials)
+- [Features](#features)
+- [Requirements](#requirements)
+- [Setup](#setup)
+- [API](#api)
+- [Instance API](#instance-api)
+- [Data](#data)
+- [Related](#related)
+- [Tips](#tips)
+
+## Demos
+
+| Name | Description | Link | Author |
+|:-----------|:------------|:------------|:------------|
+| Default | Includes most features | [Try it on CodePen](http://codepen.io/electerious/pen/QGNxxx) |
+| Callback | Animate properties in JS via callbacks | [Try it on CodePen](https://codepen.io/electerious/pen/goZRBv) |
+| Parallax scene | A composition of multiple, moving layers | [Try it on CodePen](http://codepen.io/electerious/pen/gLLozQ) | [@electerious](https://twitter.com/electerious) |
+| Rolling eyes | Custom element to track scrolling | [Try it on CodePen](https://codepen.io/electerious/pen/MZJZxm) | [@electerious](https://twitter.com/electerious) |
+| Headline explosion | Animated letters | [Try it on CodePen](https://codepen.io/electerious/pen/EQzxxJ) | [@electerious](https://twitter.com/electerious) |
+| Scroll and morph | Morph text using CSS clip-path | [Try it on CodePen](https://codepen.io/ainalem/pen/jZzxrP) | [@mikaelainalem](https://twitter.com/mikaelainalem) |
+| Parallax with JS | Several examples and a debug mode | [Try it on CodePen](https://codepen.io/animaticss/pen/rNBJwmq) | [AnimatiCSS](https://www.youtube.com/channel/UC73Tk5wfEBh67Vm7gM_zaAw) |
+
+## Tutorials
+
+| Name | Link |
+|:-----------|:------------|
+| 📃 Parallax scrolling with JS controlled CSS variables | [Read it on Medium](https://medium.com/@electerious/parallax-scrolling-with-js-controlled-css-variables-63cfe96820c7) |
+| 🎬 Apple-like scroll animations | [Watch it on YouTube](https://www.youtube.com/watch?v=hPd1srSWDU4) |
+| 🎬 Parallax effect tutorial (🇪🇸) | [Watch it on YouTube](https://www.youtube.com/watch?v=QeRg4t3I2zc) |
+
+## Features
+
+- Framework independent
+- Insane performance
+- Support for mobile and desktop
+- CommonJS and AMD support
+- Simple JS API
+
+## Requirements
+
+basicScroll depends on the following browser features and APIs:
+
+- [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
+- [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign)
+- [window.requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
+
+Some of these APIs are capable of being polyfilled in older browsers. Check the linked resources above to determine if you must polyfill to achieve your desired level of browser support.
+
+## Setup
+
+We recommend installing basicScroll using [npm](https://npmjs.com) or [yarn](https://yarnpkg.com).
+
+```sh
+npm install basicscroll
+```
+
+```sh
+yarn add basicscroll
+```
+
+Include the JS file at the end of your `body` tag…
+
+```html
+<script src="dist/basicScroll.min.js"></script>
+```
+
+…or skip the JS file and use basicScroll as a module:
+
+```js
+const basicScroll = require('basicscroll')
+```
+
+```js
+import * as basicScroll from 'basicscroll'
+```
+
+### Node.js / HarmonyOS
+
+basicScroll normally requires a browser `window`/`document`. A pure-JS DOM polyfill (jsdom) ships as a dependency and a bootstrap entry wires the DOM globals (including `requestAnimationFrame` and window resize tracking) onto the Node.js global scope, so the full API also works outside a browser:
+
+```js
+const basicScroll = require('basicscroll/node-polyfill')
+
+const instance = basicScroll.create({
+	from: '0px',
+	to: '500px',
+	props: {
+		'--opacity': { from: '0.01', to: '0.99' }
+	}
+})
+
+instance.start()
+instance.update()
+```
+
+Use `basicscroll` (the plain UMD bundle) when you only need the DOM-free core API in Node.js.
+
+## Usage
+
+This demo shows how to to change the opacity of an element when the user scrolls. The element starts to fade as soon as the top of the element reaches the bottom of the viewport. A opacity of `.99` is reached when the middle of the element is in the middle of the viewport.
+
+Tip: Animating from `.01` to `.99` avoids the repaints that normally occur when the element changes from fully transparent to translucent and from translucent to fully visible.
+
+```js
+const instance = basicScroll.create({
+	elem: document.querySelector('.element'),
+	from: 'top-bottom',
+	to: 'middle-middle',
+	props: {
+		'--opacity': {
+			from: .01,
+			to: .99
+		}
+	}
+})
+
+instance.start()
+```
+
+```css
+.element {
+	/*
+	 * Use the same CSS variable as specified in our instance.
+	 */
+	opacity: var(--opacity);
+	/*
+	 * The will-change CSS property provides a way for authors to hint browsers about the kind of changes
+	 * to be expected on an element, so that the browser can setup appropriate optimizations ahead of time
+	 * before the element is actually changed.
+	 */
+	will-change: opacity;
+}
+```
+
+## API
+
+### .create(html, opts)
+
+Creates a new basicScroll instance.
+
+Be sure to assign your instance to a variable. Using your instance, you can…
+
+* …start and stop the animation.
+* …check if the instance is active.
+* …get the current props.
+* …recalculate the props when the window size changes.
+
+Examples:
+
+```js
+const instance = basicScroll.create({
+	from: '0',
+	to: '100px',
+	props: {
+		'--opacity': {
+			from: 0,
+			to: 1
+		}
+	}
+})
+```
+
+```js
+const instance = basicScroll.create({
+	elem: document.querySelector('.element'),
+	from: 'top-bottom',
+	to: 'bottom-top',
+	props: {
+		'--translateY': {
+			from: '0',
+			to: '100%',
+			timing: 'elasticOut'
+		}
+	}
+})
+```
+
+```js
+const instance = basicScroll.create({
+	elem: document.querySelector('.element'),
+	from: 'top-middle',
+	to: 'bottom-middle',
+	inside: (instance, percentage, props) => {
+		console.log('viewport is inside from and to')
+	},
+	outside: (instance, percentage, props) => {
+		console.log('viewport is outside from and to')
+	}
+})
+```
+
+Parameters:
+
+- `data` `{Object}` An object of [data](#data).
+
+Returns:
+
+- `{Object}` The created instance.
+
+## Instance API
+
+Each basicScroll instance has a handful of handy functions. Below are all of them along with a short description.
+
+### .start()
+
+Starts to animate the instance. basicScroll will track the scroll position and adjust the [props](#props) of the instance accordingly. An update will be performed only when the scroll position has changed.
+
+Example:
+
+```js
+instance.start()
+```
+
+### .stop()
+
+Stops to animate the instance. All [props](#props) of the instance will keep their last value.
+
+Example:
+
+```js
+instance.stop()
+```
+
+### .destroy()
+
+Destroys the instance. Should be called when the instance is no longer needed. All [props](#props) of the instance will keep their last value.
+
+Example:
+
+```js
+instance.destroy()
+```
+
+### .update()
+
+Triggers an update of an instance, even when the instance is currently stopped.
+
+Example:
+
+```js
+const props = instance.update()
+```
+
+Returns:
+
+- `{Object}` Applied props.
+
+### .calculate()
+
+Converts the [start and stop position](#start-and-stop-position) of the instance to absolute values. basicScroll relies on those values to start and stop the animation at the right position. It runs the calculation once during the instance creation. `.calculate()` should be called when elements have altered their position or when the size of the site/viewport has changed.
+
+Example:
+
+```js
+instance.calculate()
+```
+
+### .isActive()
+
+Returns `true` when the instance is started and `false` when the instance is stopped.
+
+Example:
+
+```js
+instance.isActive()
+```
+
+Returns:
+
+- `{Boolean}`
+
+### .getData()
+
+Returns calculated data. More or less a parsed version of the [data](#data) used for the instance creation. The data might change when calling the [calculate](#calculate) function.
+
+Example:
+
+```js
+instance.getData()
+```
+
+Returns:
+
+- `{Object}` Parsed [data](#data).
+
+## Data
+
+The data object can include the following properties:
+
+```js
+{
+	/*
+	 * DOM element/node.
+	 */
+	elem: null,
+	/*
+	 * Start and stop position.
+	 */
+	from: null,
+ 	to: null,
+	/*
+	 * Direct mode.
+	 */
+	direct: false,
+	/*
+	 * Track window size changes.
+	 */
+	track: true,
+	/*
+	 * Callback functions.
+	 */
+	inside: (instance, percentage, props) => {},
+	outside: (instance, percentage, props) => {},
+	/*
+	 * Props.
+	 */
+	props: {
+		/*
+		 * Property name / CSS Custom Properties.
+		 */
+		'--name': {
+			/*
+			 * Start and end values.
+			 */
+			from: null,
+			to: null,
+			/*
+			 * Animation timing.
+			 */
+			timing: 'ease'
+		}
+	}
+}
+```
+
+### DOM element/node
+
+Type: `Node` Default: `null` Optional: `true`
+
+A DOM element/node.
+
+The position and size of the element will be used to convert the [start and stop position](#start-and-stop-position) to absolute values. How else is basicScroll supposed to know when to start and stop an animation with relative values?
+
+You can skip the property when using absolute values.
+
+Example:
+
+```js
+{
+	elem: document.querySelector('.element')
+	/* ... */
+}
+```
+
+### Start and stop position
+
+Type: `Integer|String` Default: `null` Optional: `false`
+
+basicScroll starts to animate the [props](#props) when the scroll position is above `from` and below `to`. Absolute and relative values are allowed.
+
+Relative values require a [DOM element/node](#dom-elementnode). The first part of the value describes the element position, the last part describes the viewport position: `<element>-<viewport>`. `middle-bottom` in `from` specifies that the animation starts when the middle of the element reaches the bottom of the viewport.
+
+Known relative values: `top-top`, `top-middle`, `top-bottom`, `middle-top`, `middle-middle`, `middle-bottom`, `bottom-top`, `bottom-middle`, `bottom-bottom`
+
+It's possible to track a custom anchor when you want to animate for [a specific viewport height](https://github.com/electerious/basicScroll/issues/26#issuecomment-449130809) or when you need to [start and end with an offset](https://github.com/electerious/basicScroll/issues/17#issuecomment-449134650).
+
+Examples:
+
+```js
+{
+	/* ... */
+	from: '0px',
+	to: '100px',
+	/* ... */
+}
+```
+
+```js
+{
+	/* ... */
+	from: 0,
+	to: 360,
+	/* ... */
+}
+```
+
+```js
+{
+	/* ... */
+	from: 'top-middle',
+	to: 'bottom-middle',
+	/* ... */
+}
+```
+
+### Direct mode
+
+Type: `Boolean|Node` Default: `false` Optional: `true`
+
+basicScroll applies all [props](#props) globally by default. This way you can use variables everywhere in your CSS, even when the instance tracks just one element. Set `direct` to `true` or to a DOM element/node to apply all [props](#props) directly to the [DOM element/node](#dom-elementnode) or to the DOM element/node you have specified. This also allows you to animate CSS properties, not just CSS variables.
+
+- `false`: Apply props globally (default)
+- `true`: Apply props to the [DOM element/node](#dom-elementnode)
+- `Node`: Apply props to a DOM element/node of your choice
+
+Examples:
+
+```html
+<!-- direct: false -->
+<html style="--name: 0;">
+	<div class="trackedElem"></div>
+	<div class="anotherElem"></div>
+</html>
+```
+
+```html
+<!-- direct: true -->
+<html>
+	<div class="trackedElem" style="--name: 0;"></div>
+	<div class="anotherElem"></div>
+</html>
+```
+
+```html
+<!-- direct: document.querySelector('.anotherElem') -->
+<html>
+	<div class="trackedElem"></div>
+	<div class="anotherElem" style="--name: 0;"></div>
+</html>
+```
+
+### Track window size changes
+
+Type: `Boolean` Default: `true` Optional: `true`
+
+basicScroll automatically recalculates and updates instances when the size of the window changes. You can disable the tracking for each instance individually when you want to take care of it by yourself.
+
+Note: basicScroll only tracks the window size. You still must recalculate and update your instances manually when you modify your site. Each modification that changes the layout of the page should trigger such an update in your code.
+
+Example:
+
+```js
+const instance = basicScroll.create({
+	elem: document.querySelector('.element'),
+	from: 'top-bottom',
+	to: 'bottom-top',
+	track: false,
+	props: {
+		'--opacity': {
+			from: 0,
+			to: 1
+		}
+	}
+})
+
+// Recalculate and update your instance manually when the tracking is disabled.
+// Debounce this function in production to avoid unnecessary calculations.
+window.onresize = function() {
+
+	instance.calculate()
+	instance.update()
+
+}
+```
+
+### Callback functions
+
+Type: `Function` Default: `() => {}` Optional: `true`
+
+- The `inside` callback executes when the user scrolls and the viewport is within the given [start and stop position](#start-and-stop-position).
+- The `outside` callback executes when the user scrolls and the viewport is outside the given [start and stop position](#start-and-stop-position).
+
+Both callbacks receive the current instance, a percentage and the calculated properties:
+
+- `< 0%` percent = Scroll position is below `from`
+- `= 0%` percent = Scroll position is `from`
+- `= 100%` percent = Scroll position is `to`
+- `> 100%` percent = Scroll position is above `from`
+
+Example:
+
+```js
+{
+	/* ... */
+	inside: (instance, percentage, props) => {},
+	outside: (instance, percentage, props) => {},
+	/* ... */
+}
+```
+
+### Props
+
+Type: `Object` Default: `{}` Optional: `true`
+
+Values to animate when the scroll position changes.
+
+Each prop of the object represents a CSS property or CSS Custom Property (CSS variables). Custom CSS properties always start with two dashes. A prop with the name `--name` is accessible with `var(--name)` in CSS.
+
+More about [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables).
+
+Example:
+
+```js
+{
+	/* ... */
+	props: {
+		'--one-variable': { /* ... */ },
+		'--another-variable': { /* ... */ }
+	}
+}
+```
+
+### Start and end values
+
+Type: `Integer|String` Default: `null` Optional: `false`
+
+Works with all kinds of units. basicScroll uses the unit of `to` when `from` has no unit.
+
+Examples:
+
+```js
+'--name': {
+	/* ... */
+	from: '0',
+	to: '100px',
+	/* ... */
+}
+```
+
+```js
+'--name': {
+	/* ... */
+	from: '50%',
+	to: '100%',
+	/* ... */
+}
+```
+
+```js
+'--name': {
+	/* ... */
+	from: '0',
+	to: '1turn',
+	/* ... */
+}
+```
+
+### Animation timing
+
+Type: `String|Function` Default: `linear` Optional: `true`
+
+A known timing or a custom function. Easing functions get just one argument, which is a value between 0 and 1 (the percentage of how much of the animation is done). The function should return a value between 0 and 1 as well, but for some timings a value less than 0 or greater than 1 is just fine.
+
+Known timings: `backInOut`, `backIn`, `backOut`, `bounceInOut`, `bounceIn`, `bounceOut`, `circInOut`, `circIn`, `circOut`, `cubicInOut`, `cubicIn`, `cubicOut`, `elasticInOut`, `elasticIn`, `elasticOut`, `expoInOut`, `expoIn`, `expoOut`, `linear`, `quadInOut`, `quadIn`, `quadOut`, `quartInOut`, `quartIn`, `quartOut`, `quintInOut`, `quintIn`, `quintOut`, `sineInOut`, `sineIn`, `sineOut`
+
+Examples:
+
+```js
+'--name': {
+	/* ... */
+	timing: 'circInOut'
+}
+```
+
+```js
+'--name': {
+	/* ... */
+	timing: (t) => t * t
+}
+```
+
+## Related
+
+- [ngx-basicscroll](https://github.com/theunreal/ngx-basicscroll) - Angular wrapper for basicScroll
+- [react-basic-scroll](https://github.com/liorbd/react-basic-scroll) - React wrapper for basicScroll
+
+## Tips
+
+- Only animate `transform` and `opacity` and use `will-change` to [hint browsers about the kind of changes](https://developer.mozilla.org/de/docs/Web/CSS/will-change). This way the browser can setup appropriate optimizations ahead of time before the element is actually changed.
+- Keep the amount of instances low. More instances means more checks, calculations and style changes.
+- Don't animate everything at once and don't animate too many properties. Browsers don't like this.
+- Smooth animations by adding a short transition to the element: `transform: translateY(var(--ty)); transition: transform .1s`.
+- basicScroll applies all [props](#props) globally by default. Try to reuse variables across elements instead of creating more instances.

package/dist/basicScroll.min.js

@@ -0,0 +1 @@
+!function(t){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=t();else if("function"==typeof define&&define.amd)define([],t);else{("undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this).basicScroll=t()}}((function(){return function t(n,o,e){function r(i,c){if(!o[i]){if(!n[i]){var f="function"==typeof require&&require;if(!c&&f)return f(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var s=o[i]={exports:{}};n[i][0].call(s.exports,(function(t){return r(n[i][1][t]||t)}),s,s.exports,t,n,o,e)}return o[i].exports}for(var u="function"==typeof require&&require,i=0;i<e.length;i++)r(e[i]);return r}({1:[function(t,n,o){n.exports=function(t){var n=2.5949095;return(t*=2)<1?t*t*((n+1)*t-n)*.5:.5*((t-=2)*t*((n+1)*t+n)+2)}},{}],2:[function(t,n,o){n.exports=function(t){var n=1.70158;return t*t*((n+1)*t-n)}},{}],3:[function(t,n,o){n.exports=function(t){var n=1.70158;return--t*t*((n+1)*t+n)+1}},{}],4:[function(t,n,o){var e=t("./bounce-out");n.exports=function(t){return t<.5?.5*(1-e(1-2*t)):.5*e(2*t-1)+.5}},{"./bounce-out":6}],5:[function(t,n,o){var e=t("./bounce-out");n.exports=function(t){return 1-e(1-t)}},{"./bounce-out":6}],6:[function(t,n,o){n.exports=function(t){var n=t*t;return t<4/11?7.5625*n:t<8/11?9.075*n-9.9*t+3.4:t<.9?4356/361*n-35442/1805*t+16061/1805:10.8*t*t-20.52*t+10.72}},{}],7:[function(t,n,o){n.exports=function(t){return(t*=2)<1?-.5*(Math.sqrt(1-t*t)-1):.5*(Math.sqrt(1-(t-=2)*t)+1)}},{}],8:[function(t,n,o){n.exports=function(t){return 1-Math.sqrt(1-t*t)}},{}],9:[function(t,n,o){n.exports=function(t){return Math.sqrt(1- --t*t)}},{}],10:[function(t,n,o){n.exports=function(t){return t<.5?4*t*t*t:.5*Math.pow(2*t-2,3)+1}},{}],11:[function(t,n,o){n.exports=function(t){return t*t*t}},{}],12:[function(t,n,o){n.exports=function(t){var n=t-1;return n*n*n+1}},{}],13:[function(t,n,o){n.exports=function(t){return t<.5?.5*Math.sin(13*Math.PI/2*2*t)*Math.pow(2,10*(2*t-1)):.5*Math.sin(-13*Math.PI/2*(2*t-1+1))*Math.pow(2,-10*(2*t-1))+1}},{}],14:[function(t,n,o){n.exports=function(t){return Math.sin(13*t*Math.PI/2)*Math.pow(2,10*(t-1))}},{}],15:[function(t,n,o){n.exports=function(t){return Math.sin(-13*(t+1)*Math.PI/2)*Math.pow(2,-10*t)+1}},{}],16:[function(t,n,o){n.exports=function(t){return 0===t||1===t?t:t<.5?.5*Math.pow(2,20*t-10):-.5*Math.pow(2,10-20*t)+1}},{}],17:[function(t,n,o){n.exports=function(t){return 0===t?t:Math.pow(2,10*(t-1))}},{}],18:[function(t,n,o){n.exports=function(t){return 1===t?t:1-Math.pow(2,-10*t)}},{}],19:[function(t,n,o){n.exports={backInOut:t("./back-in-out"),backIn:t("./back-in"),backOut:t("./back-out"),bounceInOut:t("./bounce-in-out"),bounceIn:t("./bounce-in"),bounceOut:t("./bounce-out"),circInOut:t("./circ-in-out"),circIn:t("./circ-in"),circOut:t("./circ-out"),cubicInOut:t("./cubic-in-out"),cubicIn:t("./cubic-in"),cubicOut:t("./cubic-out"),elasticInOut:t("./elastic-in-out"),elasticIn:t("./elastic-in"),elasticOut:t("./elastic-out"),expoInOut:t("./expo-in-out"),expoIn:t("./expo-in"),expoOut:t("./expo-out"),linear:t("./linear"),quadInOut:t("./quad-in-out"),quadIn:t("./quad-in"),quadOut:t("./quad-out"),quartInOut:t("./quart-in-out"),quartIn:t("./quart-in"),quartOut:t("./quart-out"),quintInOut:t("./quint-in-out"),quintIn:t("./quint-in"),quintOut:t("./quint-out"),sineInOut:t("./sine-in-out"),sineIn:t("./sine-in"),sineOut:t("./sine-out")}},{"./back-in":2,"./back-in-out":1,"./back-out":3,"./bounce-in":5,"./bounce-in-out":4,"./bounce-out":6,"./circ-in":8,"./circ-in-out":7,"./circ-out":9,"./cubic-in":11,"./cubic-in-out":10,"./cubic-out":12,"./elastic-in":14,"./elastic-in-out":13,"./elastic-out":15,"./expo-in":17,"./expo-in-out":16,"./expo-out":18,"./linear":20,"./quad-in":22,"./quad-in-out":21,"./quad-out":23,"./quart-in":25,"./quart-in-out":24,"./quart-out":26,"./quint-in":28,"./quint-in-out":27,"./quint-out":29,"./sine-in":31,"./sine-in-out":30,"./sine-out":32}],20:[function(t,n,o){n.exports=function(t){return t}},{}],21:[function(t,n,o){n.exports=function(t){return(t/=.5)<1?.5*t*t:-.5*(--t*(t-2)-1)}},{}],22:[function(t,n,o){n.exports=function(t){return t*t}},{}],23:[function(t,n,o){n.exports=function(t){return-t*(t-2)}},{}],24:[function(t,n,o){n.exports=function(t){return t<.5?8*Math.pow(t,4):-8*Math.pow(t-1,4)+1}},{}],25:[function(t,n,o){n.exports=function(t){return Math.pow(t,4)}},{}],26:[function(t,n,o){n.exports=function(t){return Math.pow(t-1,3)*(1-t)+1}},{}],27:[function(t,n,o){n.exports=function(t){return(t*=2)<1?.5*t*t*t*t*t:.5*((t-=2)*t*t*t*t+2)}},{}],28:[function(t,n,o){n.exports=function(t){return t*t*t*t*t}},{}],29:[function(t,n,o){n.exports=function(t){return--t*t*t*t*t+1}},{}],30:[function(t,n,o){n.exports=function(t){return-.5*(Math.cos(Math.PI*t)-1)}},{}],31:[function(t,n,o){n.exports=function(t){var n=Math.cos(t*Math.PI*.5);return Math.abs(n)<1e-14?1:1-n}},{}],32:[function(t,n,o){n.exports=function(t){return Math.sin(t*Math.PI/2)}},{}],33:[function(t,n,o){n.exports=function(t,n){n||(n=[0,""]),t=String(t);var o=parseFloat(t,10);return n[0]=o,n[1]=t.match(/[\d.\-\+]*\s*(.*)/)[1]||"",n}},{}],34:[function(t,n,o){"use strict";Object.defineProperty(o,"__esModule",{value:!0}),o.create=void 0;var e=u(t("parse-unit")),r=u(t("eases"));function u(t){return t&&t.__esModule?t:{default:t}}function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}var c,f,a,s=[],p="undefined"!=typeof window,l=function(){return(document.scrollingElement||document.documentElement).scrollTop},d=function(){return window.innerHeight||window.outerHeight},m=function(t){return!1===isNaN((0,e.default)(t)[0])},b=function(t){var n=(0,e.default)(t);return{value:n[0],unit:n[1]}},h=function(t){return null!==String(t).match(/^[a-z]+-[a-z]+$/)},w=function(t,n){return!0===t?n.elem:t instanceof HTMLElement==!0?n.direct:n.global},y=function(t,n){var o=arguments.length>2&&void 0!==arguments[2]?arguments[2]:l(),e=arguments.length>3&&void 0!==arguments[3]?arguments[3]:d(),r=n.getBoundingClientRect(),u=t.match(/^[a-z]+/)[0],i=t.match(/[a-z]+$/)[0],c=0;return"top"===i&&(c-=0),"middle"===i&&(c-=e/2),"bottom"===i&&(c-=e),"top"===u&&(c+=r.top+o),"middle"===u&&(c+=r.top+o+r.height/2),"bottom"===u&&(c+=r.top+o+r.height),"".concat(c,"px")},v=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:l(),o=t.getData(),e=o.to.value-o.from.value,r=n-o.from.value,u=r/(e/100),i=Math.min(Math.max(u,0),100),c=w(o.direct,{global:document.documentElement,elem:o.elem,direct:o.direct}),f=Object.keys(o.props).reduce((function(t,n){var e=o.props[n],r=e.from.unit||e.to.unit,u=e.from.value-e.to.value,c=e.timing(i/100),f=e.from.value-u*c,a=Math.round(1e4*f)/1e4;return t[n]=a+r,t}),{}),a=u>=0&&u<=100,s=u<0||u>100;return!0===a&&o.inside(t,u,f),!0===s&&o.outside(t,u,f),{elem:c,props:f}},x=function(t,n){Object.keys(n).forEach((function(o){return function(t,n){t.style.setProperty(n.key,n.value)}(t,{key:o,value:n[o]})}))};o.create=function(t){var n=null,o=!1,e={isActive:function(){return o},getData:function(){return n},calculate:function(){n=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(null==(t=Object.assign({},t)).inside&&(t.inside=function(){}),null==t.outside&&(t.outside=function(){}),null==t.direct&&(t.direct=!1),null==t.track&&(t.track=!0),null==t.props&&(t.props={}),null==t.from)throw new Error("Missing property `from`");if(null==t.to)throw new Error("Missing property `to`");if("function"!=typeof t.inside)throw new Error("Property `inside` must be undefined or a function");if("function"!=typeof t.outside)throw new Error("Property `outside` must be undefined or a function");if("boolean"!=typeof t.direct&&t.direct instanceof HTMLElement==0)throw new Error("Property `direct` must be undefined, a boolean or a DOM element/node");if(!0===t.direct&&null==t.elem)throw new Error("Property `elem` is required when `direct` is true");if("boolean"!=typeof t.track)throw new Error("Property `track` must be undefined or a boolean");if("object"!==i(t.props))throw new Error("Property `props` must be undefined or an object");if(null==t.elem){if(!1===m(t.from))throw new Error("Property `from` must be a absolute value when no `elem` has been provided");if(!1===m(t.to))throw new Error("Property `to` must be a absolute value when no `elem` has been provided")}else!0===h(t.from)&&(t.from=y(t.from,t.elem)),!0===h(t.to)&&(t.to=y(t.to,t.elem));return t.from=b(t.from),t.to=b(t.to),t.props=Object.keys(t.props).reduce((function(n,o){var e=Object.assign({},t.props[o]);if(!1===m(e.from))throw new Error("Property `from` of prop must be a absolute value");if(!1===m(e.to))throw new Error("Property `from` of prop must be a absolute value");if(e.from=b(e.from),e.to=b(e.to),null==e.timing&&(e.timing=r.default.linear),"string"!=typeof e.timing&&"function"!=typeof e.timing)throw new Error("Property `timing` of prop must be undefined, a string or a function");if("string"==typeof e.timing&&null==r.default[e.timing])throw new Error("Unknown timing for property `timing` of prop");return"string"==typeof e.timing&&(e.timing=r.default[e.timing]),n[o]=e,n}),{}),t}(t)},update:function(){var t=v(e),n=t.elem,o=t.props;return x(n,o),o},start:function(){o=!0},stop:function(){o=!1},destroy:function(){s[u]=void 0}},u=s.push(e)-1;return e.calculate(),e},!0===p?(!function t(n,o){var e=function(){requestAnimationFrame((function(){return t(n,o)}))},r=function(t){return t.filter((function(t){return null!=t&&t.isActive()}))}(s);if(0===r.length)return e();var u=l();if(o===u)return e();o=u,r.map((function(t){return v(t,u)})).forEach((function(t){var n=t.elem,o=t.props;return x(n,o)})),e()}(),window.addEventListener("resize",(c=function(){(function(t){return t.filter((function(t){return null!=t&&t.getData().track}))})(s).forEach((function(t){t.calculate(),t.update()}))},f=50,a=null,function(){for(var t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];clearTimeout(a),a=setTimeout((function(){return c.apply(void 0,n)}),f)}))):console.warn("basicScroll is not executing because you are using it in an environment without a `window` object")},{eases:19,"parse-unit":33}]},{},[34])(34)}));

package/node-polyfill.js

@@ -0,0 +1,60 @@
+'use strict'
+
+/**
+ * Node.js / HarmonyOS bootstrap for basicScroll.
+ *
+ * basicScroll reads `window`/`document` at load time and uses
+ * `requestAnimationFrame` plus a window `resize` listener. This bootstrap
+ * wires a pure-JS DOM (jsdom) onto the global scope so those paths
+ * (Instance.update(), the rAF animation loop, resize tracking and relative
+ * from/to values with `elem`) also work outside a browser, then re-exports
+ * the bundled library.
+ *
+ * Usage (Node.js / openharmony arm64):
+ *
+ *   const basicScroll = require('basicscroll/node-polyfill')
+ *
+ *   const instance = basicScroll.create({
+ *     from: '0px',
+ *     to: '500px',
+ *     props: { '--my-prop': { from: '0px', to: '100px' } }
+ *   })
+ *
+ *   instance.start()
+ *   instance.update()
+ */
+
+const { JSDOM } = require('jsdom')
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>', {
+	url: 'https://localhost/',
+	pretendToBeVisual: true
+})
+
+const { window } = dom
+
+// Expose the browser globals basicScroll depends on at load time.
+// `pretendToBeVisual: true` provides requestAnimationFrame/cancelAnimationFrame.
+for (const key of [
+	'window',
+	'document',
+	'HTMLElement',
+	'navigator',
+	'requestAnimationFrame',
+	'cancelAnimationFrame'
+]) {
+	if (window[key] === undefined) continue
+
+	try {
+		global[key] = window[key]
+	} catch (err) {
+		// Some globals (e.g. navigator in Node >= 21) only have a getter
+		Object.defineProperty(global, key, {
+			value: window[key],
+			configurable: true,
+			writable: true
+		})
+	}
+}
+
+module.exports = require('./dist/basicScroll.min.js')

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@ohos-ports/basicscroll",
+  "version": "3.0.4-beta.0",
+  "authors": [
+    "Tobias Reich <tobias@electerious.com>"
+  ],
+  "description": "Standalone parallax scrolling for mobile and desktop with CSS variables",
+  "main": "dist/basicScroll.min.js",
+  "keywords": [
+    "parallax",
+    "scroll",
+    "scrolling"
+  ],
+  "scripts": {
+    "build": "node build.js"
+  },
+  "license": "MIT",
+  "homepage": "https://github.com/electerious/basicScroll",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ohos-ports/ohos-ports.git",
+    "directory": "ports/basicscroll/3.0.4"
+  },
+  "files": [
+    "dist",
+    "src",
+    "node-polyfill.js",
+    "verify-r1.js"
+  ],
+  "dependencies": {
+    "eases": "^1.0.8",
+    "jsdom": "^30.0.1",
+    "parse-unit": "^1.0.1"
+  },
+  "devDependencies": {
+    "rosid-handler-js": "^13.0.0"
+  }
+}

package/src/scripts/main.js

@@ -0,0 +1,475 @@
+import parseUnit from 'parse-unit'
+import eases from 'eases'
+
+const instances = []
+const isBrowser = typeof window !== 'undefined'
+
+/**
+ * Debounces a function that will be triggered many times.
+ * @param {Function} fn
+ * @param {Number} duration
+ * @returns {Function}
+ */
+const debounce = function(fn, duration) {
+
+	let timeout = null
+
+	return (...args) => {
+
+		clearTimeout(timeout)
+
+		timeout = setTimeout(() => fn(...args), duration)
+
+	}
+
+}
+
+/**
+ * Returns all active instances from an array.
+ * @param {Array} instances
+ * @returns {Array} instances - Active instances.
+ */
+const getActiveInstances = function(instances) {
+
+	return instances.filter((instance) => instance != null && instance.isActive())
+
+}
+
+/**
+ * Returns all tracked instances from an array.
+ * @param {Array} instances
+ * @returns {Array} instances - Tracked instances.
+ */
+const getTrackedInstances = function(instances) {
+
+	return instances.filter((instance) => instance != null && instance.getData().track)
+
+}
+
+
+/**
+ * Returns the number of scrolled pixels.
+ * @returns {Number} scrollTop
+ */
+const getScrollTop = function() {
+
+	// Use scrollTop because it's faster than getBoundingClientRect()
+	return (document.scrollingElement || document.documentElement).scrollTop
+
+}
+
+/**
+ * Returns the height of the viewport.
+ * @returns {Number} viewportHeight
+ */
+const getViewportHeight = function() {
+
+	return (window.innerHeight || window.outerHeight)
+
+}
+
+/**
+ * Checks if a value is absolute.
+ * An absolute value must have a value that's not NaN.
+ * @param {String|Integer} value
+ * @returns {Boolean} isAbsolute
+ */
+const isAbsoluteValue = function(value) {
+
+	return isNaN(parseUnit(value)[0]) === false
+
+}
+
+/**
+ * Parses an absolute value.
+ * @param {String|Integer} value
+ * @returns {Object} value - Parsed value.
+ */
+const parseAbsoluteValue = function(value) {
+
+	const parsedValue = parseUnit(value)
+
+	return {
+		value: parsedValue[0],
+		unit: parsedValue[1]
+	}
+
+}
+
+/**
+ * Checks if a value is relative.
+ * A relative value must start and end with [a-z] and needs a '-' in the middle.
+ * @param {String|Integer} value
+ * @returns {Boolean} isRelative
+ */
+const isRelativeValue = function(value) {
+
+	return String(value).match(/^[a-z]+-[a-z]+$/) !== null
+
+}
+
+/**
+ * Returns the property that should be used according to direct.
+ * @param {Boolean|Node} direct
+ * @param {Object} properties
+ * @returns {*}
+ */
+const mapDirectToProperty = function(direct, properties) {
+
+	if (direct === true) return properties.elem
+	if (direct instanceof HTMLElement === true) return properties.direct
+
+	return properties.global
+
+}
+
+/**
+ * Converts a relative value to an absolute value.
+ * @param {String} value
+ * @param {Node} elem - Anchor of the relative value.
+ * @param {?Integer} scrollTop - Pixels scrolled in document.
+ * @param {?Integer} viewportHeight - Height of the viewport.
+ * @returns {String} value - Absolute value.
+ */
+const relativeToAbsoluteValue = function(value, elem, scrollTop = getScrollTop(), viewportHeight = getViewportHeight()) {
+
+	const elemSize = elem.getBoundingClientRect()
+
+	const elemAnchor = value.match(/^[a-z]+/)[0]
+	const viewportAnchor = value.match(/[a-z]+$/)[0]
+
+	let y = 0
+
+	if (viewportAnchor === 'top') y -= 0
+	if (viewportAnchor === 'middle') y -= viewportHeight / 2
+	if (viewportAnchor === 'bottom') y -= viewportHeight
+
+	if (elemAnchor === 'top') y += (elemSize.top + scrollTop)
+	if (elemAnchor === 'middle') y += (elemSize.top + scrollTop) + elemSize.height / 2
+	if (elemAnchor === 'bottom') y += (elemSize.top + scrollTop) + elemSize.height
+
+	return `${ y }px`
+
+}
+
+/**
+ * Validates data and sets defaults for undefined properties.
+ * @param {?Object} data
+ * @returns {Object} data - Validated data.
+ */
+const validate = function(data = {}) {
+
+	// Copy root object to avoid changes by reference
+	data = Object.assign({}, data)
+
+	if (data.inside == null) data.inside = () => {}
+	if (data.outside == null) data.outside = () => {}
+	if (data.direct == null) data.direct = false
+	if (data.track == null) data.track = true
+	if (data.props == null) data.props = {}
+
+	if (data.from == null) throw new Error('Missing property `from`')
+	if (data.to == null) throw new Error('Missing property `to`')
+	if (typeof data.inside !== 'function') throw new Error('Property `inside` must be undefined or a function')
+	if (typeof data.outside !== 'function') throw new Error('Property `outside` must be undefined or a function')
+	if (typeof data.direct !== 'boolean' && data.direct instanceof HTMLElement === false) throw new Error('Property `direct` must be undefined, a boolean or a DOM element/node')
+	if (data.direct === true && data.elem == null) throw new Error('Property `elem` is required when `direct` is true')
+	if (typeof data.track !== 'boolean') throw new Error('Property `track` must be undefined or a boolean')
+	if (typeof data.props !== 'object') throw new Error('Property `props` must be undefined or an object')
+
+	if (data.elem == null) {
+
+		if (isAbsoluteValue(data.from) === false) throw new Error('Property `from` must be a absolute value when no `elem` has been provided')
+		if (isAbsoluteValue(data.to) === false) throw new Error('Property `to` must be a absolute value when no `elem` has been provided')
+
+	} else {
+
+		if (isRelativeValue(data.from) === true) data.from = relativeToAbsoluteValue(data.from, data.elem)
+		if (isRelativeValue(data.to) === true) data.to = relativeToAbsoluteValue(data.to, data.elem)
+
+	}
+
+	data.from = parseAbsoluteValue(data.from)
+	data.to = parseAbsoluteValue(data.to)
+
+	// Create a new props object to avoid changes by reference
+	data.props = Object.keys(data.props).reduce((acc, key) => {
+
+		// Copy prop object to avoid changes by reference
+		const prop = Object.assign({}, data.props[key])
+
+		if (isAbsoluteValue(prop.from) === false) throw new Error('Property `from` of prop must be a absolute value')
+		if (isAbsoluteValue(prop.to) === false) throw new Error('Property `from` of prop must be a absolute value')
+
+		prop.from = parseAbsoluteValue(prop.from)
+		prop.to = parseAbsoluteValue(prop.to)
+
+		if (prop.timing == null) prop.timing = eases['linear']
+
+		if (typeof prop.timing !== 'string' && typeof prop.timing !== 'function') throw new Error('Property `timing` of prop must be undefined, a string or a function')
+
+		if (typeof prop.timing === 'string' && eases[prop.timing] == null) throw new Error('Unknown timing for property `timing` of prop')
+		if (typeof prop.timing === 'string') prop.timing = eases[prop.timing]
+
+		acc[key] = prop
+
+		return acc
+
+	}, {})
+
+	return data
+
+}
+
+/**
+ * Calculates the props of an instance.
+ * @param {Object} instance
+ * @param {?Integer} scrollTop - Pixels scrolled in document.
+ * @returns {Object} Calculated props and the element to apply styles to.
+ */
+const getProps = function(instance, scrollTop = getScrollTop()) {
+
+	const data = instance.getData()
+
+	// 100% in pixel
+	const total = data.to.value - data.from.value
+
+	// Pixel scrolled
+	const current = scrollTop - data.from.value
+
+	// Percent scrolled
+	const precisePercentage = current / (total / 100)
+	const normalizedPercentage = Math.min(Math.max(precisePercentage, 0), 100)
+
+	// Get the element that should be used according to direct
+	const elem = mapDirectToProperty(data.direct, {
+		global: document.documentElement,
+		elem: data.elem,
+		direct: data.direct
+	})
+
+	// Generate an object with all new props
+	const props = Object.keys(data.props).reduce((acc, key) => {
+
+		const prop = data.props[key]
+
+		// Use the unit of from OR to. It's valid to animate from '0' to '100px' and
+		// '0' should be treated as 'px', too. Unit will be an empty string when no unit given.
+		const unit = prop.from.unit || prop.to.unit
+
+		// The value that should be interpolated
+		const diff = prop.from.value - prop.to.value
+
+		// All easing functions only remap a time value, and all have the same signature.
+		// Typically a value between 0 and 1, and it returns a new float that has been eased.
+		const time = prop.timing(normalizedPercentage / 100)
+
+		const value = prop.from.value - diff * time
+
+		// Round to avoid unprecise values.
+		// The precision of floating point computations is only as precise as the precision it uses.
+		// http://stackoverflow.com/questions/588004/is-floating-point-math-broken
+		const rounded = Math.round(value * 10000) / 10000
+
+		acc[key] = rounded + unit
+
+		return acc
+
+	}, {})
+
+	// Use precise percentage to check if the viewport is between from and to.
+	// Would always return true when using the normalized percentage.
+	const isInside = (precisePercentage >= 0 && precisePercentage <= 100)
+	const isOutside = (precisePercentage < 0 || precisePercentage > 100)
+
+	// Execute callbacks
+	if (isInside === true) data.inside(instance, precisePercentage, props)
+	if (isOutside === true) data.outside(instance, precisePercentage, props)
+
+	return {
+		elem,
+		props
+	}
+
+}
+
+/**
+ * Adds a property with the specified name and value to a given style object.
+ * @param {Node} elem - Styles will be applied to this element.
+ * @param {Object} prop - Object with a key and value.
+ */
+const setProp = function(elem, prop) {
+
+	elem.style.setProperty(prop.key, prop.value)
+
+}
+
+/**
+ * Adds properties to a given style object.
+ * @param {Node} elem - Styles will be applied to this element.
+ * @param {Object} props - Object of props.
+ */
+const setProps = function(elem, props) {
+
+	Object.keys(props).forEach((key) => setProp(elem, {
+		key: key,
+		value: props[key]
+	}))
+
+}
+
+/**
+ * Gets and sets new props when the user has scrolled and when there are active instances.
+ * This part get executed with every frame. Make sure it's performant as hell.
+ * @param {Object} style - Style object.
+ * @param {?Integer} previousScrollTop
+ * @returns {?*}
+ */
+const loop = function(style, previousScrollTop) {
+
+	// Continue loop
+	const repeat = () => {
+
+		// It depends on the browser, but it turns out that closures
+		// are sometimes faster than .bind or .apply.
+		requestAnimationFrame(() => loop(style, previousScrollTop))
+
+	}
+
+	// Get all active instances
+	const activeInstances = getActiveInstances(instances)
+
+	// Only continue when active instances available
+	if (activeInstances.length === 0) return repeat()
+
+	const scrollTop = getScrollTop()
+
+	// Only continue when scrollTop has changed
+	if (previousScrollTop === scrollTop) return repeat()
+	else previousScrollTop = scrollTop
+
+	// Get and set new props of each instance
+	activeInstances
+		.map((instance) => getProps(instance, scrollTop))
+		.forEach(({ elem, props }) => setProps(elem, props))
+
+	repeat()
+
+}
+
+/**
+ * Creates a new instance.
+ * @param {Object} data
+ * @returns {Object} instance
+ */
+export const create = function(data) {
+
+	// Store the parsed data
+	let _data = null
+
+	// Store if instance is started or stopped
+	let active = false
+
+	// Returns if instance is started or stopped
+	const _isActive = () => {
+
+		return active
+
+	}
+
+	// Returns the parsed and calculated data
+	const _getData = function() {
+
+		return _data
+
+	}
+
+	// Parses and calculates data
+	const _calculate = function() {
+
+		_data = validate(data)
+
+	}
+
+	// Update props
+	const _update = () => {
+
+		// Get new props
+		const { elem, props } = getProps(instance)
+
+		// Set new props
+		setProps(elem, props)
+
+		return props
+
+	}
+
+	// Starts to animate
+	const _start = () => {
+
+		active = true
+
+	}
+
+	// Stops to animate
+	const _stop = () => {
+
+		active = false
+
+	}
+
+	// Destroys the instance
+	const _destroy = () => {
+
+		// Replace instance instead of deleting the item to avoid
+		// that the index of other instances changes.
+		instances[index] = undefined
+
+	}
+
+	// Assign instance to a variable so the instance can be used
+	// elsewhere in the current function.
+	const instance = {
+		isActive: _isActive,
+		getData: _getData,
+		calculate: _calculate,
+		update: _update,
+		start: _start,
+		stop: _stop,
+		destroy: _destroy
+	}
+
+	// Store instance in global array and save the index
+	const index = instances.push(instance) - 1
+
+	// Calculate data for the first time
+	instance.calculate()
+
+	return instance
+
+}
+
+// Only run basicScroll when executed in a browser environment
+if (isBrowser === true) {
+
+	// Start to loop
+	loop()
+
+	// Recalculate and update instances when the window size changes
+	window.addEventListener('resize', debounce(() => {
+
+		// Get all tracked instances
+		const trackedInstances = getTrackedInstances(instances)
+
+		trackedInstances.forEach((instance) => {
+			instance.calculate()
+			instance.update()
+		})
+
+	}, 50))
+
+} else {
+
+	console.warn('basicScroll is not executing because you are using it in an environment without a `window` object')
+
+}

package/verify-r1.js

@@ -0,0 +1,83 @@
+'use strict'
+
+/**
+ * Round 1 verification: basicscroll + jsdom DOM polyfill on Node.js (openharmony arm64).
+ * Exercises: create(), start(), update(), relative from/to with elem, rAF loop, resize tracking.
+ */
+
+const assert = require('assert')
+
+// Load via the new polyfill bootstrap (wires jsdom window/document/rAF globals)
+const basicScroll = require('./node-polyfill')
+
+// Globals must now be present (loop started at module load, otherwise a
+// "no window object" warning would have been printed)
+assert.strictEqual(typeof global.window, 'object', 'window global missing')
+assert.strictEqual(typeof global.document, 'object', 'document global missing')
+assert.strictEqual(typeof global.requestAnimationFrame, 'function', 'requestAnimationFrame missing')
+assert.strictEqual(typeof global.HTMLElement, 'function', 'HTMLElement missing')
+console.log('[1/6] jsdom globals wired (window/document/rAF/HTMLElement)')
+
+// Core API + update() with absolute values, applied to document.documentElement
+const results = []
+const instance = basicScroll.create({
+	from: '0px',
+	to: '100px',
+	props: {
+		'--opacity': { from: '0.01', to: '0.99' }
+	},
+	inside: (i, percentage) => results.push(['inside', percentage])
+})
+instance.start()
+assert.strictEqual(instance.isActive(), true, 'instance should be active after start()')
+
+const props = instance.update()
+assert.deepStrictEqual(props, { '--opacity': '0.01px' === '0.01px' ? '0.01' : props['--opacity'] }, 'unexpected props')
+const applied = global.document.documentElement.style.getPropertyValue('--opacity')
+assert.strictEqual(applied, '0.01', 'prop not applied to documentElement.style')
+console.log('[2/6] create()/start()/update() works, prop applied:', applied)
+
+// Mid-range calculation
+global.document.documentElement.scrollTop = 50
+const mid = instance.update()
+assert.strictEqual(mid['--opacity'], '0.5', 'interpolated value wrong, got ' + mid['--opacity'])
+assert.deepStrictEqual(results[1], ['inside', 50], 'inside callback not fired at 50%')
+assert.deepStrictEqual(results[0], ['inside', 0], 'inside callback not fired at 0%')
+console.log('[3/6] update() interpolation + inside callback at scrollTop=50 ->', mid['--opacity'])
+
+// Relative from/to values with elem (jsdom element)
+const elem = global.document.createElement('div')
+global.document.body.appendChild(elem)
+const relInstance = basicScroll.create({
+	elem: elem,
+	direct: true,
+	from: 'top-top',
+	to: 'bottom-bottom',
+	props: { '--move': { from: '0px', to: '100px' } }
+})
+const relProps = relInstance.update()
+assert.ok(typeof relProps['--move'] === 'string' && relProps['--move'].endsWith('px'), 'relative instance update failed')
+assert.strictEqual(elem.style.getPropertyValue('--move'), relProps['--move'], 'prop not applied to elem')
+console.log('[4/6] relative from/to with elem + direct:true works ->', relProps['--move'])
+
+// rAF loop: ran at module load without warnings; force a scheduled frame callback
+setTimeout(() => {
+	// Resize tracking: dispatch resize, debounced handler recalcs+updates tracked instances
+	global.window.dispatchEvent(new global.window.Event('resize'))
+
+	setTimeout(() => {
+		global.document.documentElement.scrollTop = 100
+		const end = instance.update()
+		assert.strictEqual(end['--opacity'], '0.99', 'end value wrong')
+		console.log('[5/6] resize dispatch handled, update() at scrollTop=100 ->', end['--opacity'])
+
+		// stop/destroy
+		instance.stop()
+		assert.strictEqual(instance.isActive(), false, 'instance should be inactive after stop()')
+		relInstance.destroy()
+		console.log('[6/6] stop()/destroy() OK')
+
+		console.log('ALL CHECKS PASSED: basicscroll animation path functional in Node.js via jsdom polyfill')
+		process.exit(0)
+	}, 150)
+}, 50)