@mangoweb/parallax - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

lib/index.d.ts

 import { Component } from '@mangoweb/scripts-base';
+declare const easings: {
+    linear: (x: number) => number;
+    easeIn: (x: number) => number;
+    easeOut: (x: number) => number;
+    easeInOut: (x: number) => number;
+};
 interface ParallaxProps {
     customProperty?: string;
+    easing?: keyof typeof easings;
 }
@@ -5,0 +12,0 @@ export declare class Parallax extends Component<ParallaxProps> {

lib/index.js

@@ -18,2 +18,8 @@ "use strict";
 var light_bounds_1 = require("light-bounds");
+var easings = {
+    linear: function (x) { return x; },
+    easeIn: function (x) { return x * x; },
+    easeOut: function (x) { return x * (2 - x); },
+    easeInOut: function (x) { return (x < 0.5 ? 2 * x * x : -1 + (4 - 2 * x) * x); },
+};
 var PARALLAX_REACH = 1; // 100vh
@@ -29,3 +35,4 @@ function clamp(min, value, max) {
             var reachDistance = window.innerHeight * PARALLAX_REACH;
-            var offset = clamp(-1, (_this.getElementYCenter() - (window.scrollY + window.innerHeight / 2)) / reachDistance, 1);
+            var easing = easings[_this.getPropOrElse('easing', 'linear')];
+            var offset = easing(clamp(-1, (_this.getElementYCenter() - (window.scrollY + window.innerHeight / 2)) / reachDistance, 1));
             _this.el.style.setProperty("--" + _this.getPropOrElse('customProperty', 'parallax'), "" + offset);
@@ -32,0 +39,0 @@ };

package.json

 {
   "name": "@mangoweb/parallax",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Watches elements vertical position in viewport.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/index.ts

 import { Component } from '@mangoweb/scripts-base'
 import { lightBounds } from 'light-bounds'
 
+const easings = {
+	linear: (x: number) => x,
+	easeIn: (x: number) => x * x,
+	easeOut: (x: number) => x * (2 - x),
+	easeInOut: (x: number) => (x < 0.5 ? 2 * x * x : -1 + (4 - 2 * x) * x),
+}
+
 interface ParallaxProps {
 	customProperty?: string
+	easing?: keyof typeof easings
 }
@@ -24,3 +32,6 @@
 		const reachDistance = window.innerHeight * PARALLAX_REACH
-		const offset = clamp(-1, (this.getElementYCenter() - (window.scrollY + window.innerHeight / 2)) / reachDistance, 1)
+		const easing = easings[this.getPropOrElse('easing', 'linear')]
+		const offset = easing(
+			clamp(-1, (this.getElementYCenter() - (window.scrollY + window.innerHeight / 2)) / reachDistance, 1)
+		)
 
@@ -27,0 +38,0 @@ this.el.style.setProperty(`--${this.getPropOrElse('customProperty', 'parallax')}`, `${offset}`)

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

8058

increased by21.28%

Lines of code

112

increased by27.27%

No dependency changes