v2.2 - Added negativeOffset

Author: iDev-Games

README.md

@@ -117,7 +117,7 @@ Trig.js creates a class of "trig-scroll-top" or "trig-scroll-bottom" onto the bo
 You can use the below data attributes for additional features
 
 ```html
-<div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-height="0" data-trig-global="false" data-trig> </div>
+<div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-negativeOffset="0" data-trig-height="0" data-trig-global="false" data-trig> </div>
 ```
 
 Check out the code of the documentation as an example.

dist/trig.js

@@ -295,7 +295,7 @@ <h2>Data Attributes</h2>
                     <p>You can use the below data attributes for additional features</p>
                     <div class="listItem">
                         <pre>
-                            &lt;div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-height="0" data-trig-global="false" data-trig&gt; &lt;/div&gt;
+                            &lt;div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-negativeOffset="0" data-trig-height="0" data-trig-global="false" data-trig&gt; &lt;/div&gt;
                         </pre>
                     </div>
                 </div>

index.html

@@ -1,6 +1,6 @@
 {
   "name": "trig-js",
-  "version": "2.1.8",
+  "version": "2.2",
   "description": "The easy way to create CSS scroll animations that react to the position of your HTML element on screen. Animate on scroll (AOS) your CSS.",
   "main": "src/trig.js",
   "repository": {
@@ -32,6 +32,6 @@
   },
   "homepage": "https://github.com/iDev-Games/trig#readme",
   "publishConfig": {
-    "registry":"https://npm.pkg.github.com/"
+    "registry": "https://npm.pkg.github.com/"
   }
 }

package.json

@@ -1,4 +1,4 @@
-/* Trig.js v2.1.7 by iDev Games */
+/* Trig.js v2.2 by iDev Games */
 class Trig
 {
     trigs = [];
@@ -59,7 +59,7 @@ class Trig
         }
     }
     trigPos(entry) {
-        var options = { offset: 0, height: 0, min: -100, max: 100 };
+        var options = { negativeOffset: 0, offset: 0, height: 0, min: -100, max: 100 };
         Object.keys(options).forEach(function(key) {
             options[key] = self.trigAttributes(entry, options, key);
         });
@@ -72,7 +72,11 @@ class Trig
             var posTop = 0 - (el);
             var pos = (posTop / (height - ((self.height)))) * 100;
         } else {
-            var posTop = 0 - (el - ((self.height / 2) + options.offset));
+            if(options.negativeOffset > 0){
+                var posTop = 0 - (el - ((self.height / 2) + options.negativeOffset));
+            } else {
+                var posTop = 0 - (el - ((self.height / 2) - options.offset));
+            }
             var pos = (posTop / (height + options.height)) * 100;
         }
         self.trigSetPos(pos, options.min, options.max, entry.target);