diff --git a/README.md b/README.md
index c65749c..8a999d8 100644
--- a/README.md
+++ b/README.md
@@ -38,10 +38,10 @@ npm i trig-js
Use Trig.js from a CDN
```
-https://cdn.jsdelivr.net/npm/trig-js@1.8.0/dist/trig.js
+https://cdn.jsdelivr.net/npm/trig-js@1.9.0/dist/trig.js
```
```
-https://unpkg.com/trig-js@1.8.0/dist/trig.js
+https://unpkg.com/trig-js@1.9.0/dist/trig.js
```
# What is Trig.js?
@@ -62,10 +62,10 @@ All you need to do is add the dist trig.js file into your projects JS folder and
Or just add one of the below CDN instead
```html
-
+
```
```html
-
+
```
# How To Use?
diff --git a/dist/trig.js b/dist/trig.js
index 86b840b..5444b8b 100755
--- a/dist/trig.js
+++ b/dist/trig.js
@@ -1 +1 @@
-const trig={trigs:[],thePos:[],documentHeight:0,observer:new IntersectionObserver(function(t){trigObject.trigEntries(t),trigObject.updatePos(trigObject.trigs),trigObject.observer.disconnect()}),trigIntersecting:function(t){t.isIntersecting?t.target.classList.add("trig"):t.target.classList.remove("trig")},trigInit:function(){trigObject.trigs=document.querySelectorAll(".enable-trig,[data-trig]"),trigObject.documentHeight=innerHeight,trigObject.trigScroll()},trigScroll:function(){trigObject.trigs&&trigObject.trigs.forEach(function(t,e){t.index=e,trigObject.observer.observe(t)})},trigEntries:function(t){t.forEach(function(t){trigObject.trigIntersecting(t),trigObject.trigPos(t)})},trigSetPos:function(t,e,r,i){t>=e&&t<=r?trigObject.thePos[i.target.index]=t:t<=e?trigObject.thePos[i.target.index]=e:t>=r&&(trigObject.thePos[i.target.index]=r)},trigPos:function(t){var e=0,r=-100,i=100,g=t.boundingClientRect.top,c=t.boundingClientRect.height;t.target.dataset.trigOffset&&(e=parseInt(t.target.dataset.trigOffset)),t.target.dataset.trigMin&&(r=parseInt(t.target.dataset.trigMin)),t.target.dataset.trigMax&&(i=parseInt(t.target.dataset.trigMax)),trigObject.documentHeight>c&&(c=trigObject.documentHeight);var s=(0-(g-(trigObject.documentHeight/2+e)))/c*100;trigObject.trigSetPos(s,r,i,t)},updatePos:function(){trigObject.trigs.forEach(function(t,e){if("true"==t.dataset.trigGlobal)var r=document.documentElement.style,i="-"+t.id;else var r=t.style,i="";r.setProperty("--trig"+i,trigObject.thePos[e]+"%"),r.setProperty("--trig-reverse"+i,-trigObject.thePos[e]+"%"),r.setProperty("--trig-px"+i,trigObject.thePos[e]+"px"),r.setProperty("--trig-px-reverse"+i,-trigObject.thePos[e]+"px"),r.setProperty("--trig-deg"+i,trigObject.thePos[e]/100*360+"deg"),r.setProperty("--trig-deg-reverse"+i,-trigObject.thePos[e]/100*360+"deg")})}},trigObject=Object.create(trig);document.addEventListener("scroll",trigObject.trigScroll,!1),document.addEventListener("resize",trigObject.trigInit,!1),document.addEventListener("DOMContentLoaded",trigObject.trigInit,!1);
\ No newline at end of file
+class Trig{trigs=[];thePos=[];height=0;observer=new IntersectionObserver(function(t){trig.trigEntries(t),trig.updatePos(trig.trigs),trig.observer.disconnect()});trigInit(){trig.trigs=document.querySelectorAll(".enable-trig,[data-trig]"),trig.height=innerHeight,trig.trigScroll()}trigScroll(){trig.trigs&&trig.trigs.forEach(function(t,r){t.index=r,trig.observer.observe(t)})}trigEntries(t){t.forEach(function(t){trig.trigIntersecting(t),trig.trigPos(t)})}trigIntersecting(t){t.isIntersecting?t.target.classList.add("trig"):t.target.classList.remove("trig")}trigPos(t){var r=0,i=0,e=-100,g=100,s=t.boundingClientRect.top,o=t.boundingClientRect.height,n=t.target,a=n.dataset;a.trigOffset&&(r=parseInt(a.trigOffset)),a.trigMin&&(e=parseInt(a.trigMin)),a.trigMax&&(g=parseInt(a.trigMax)),a.trigHeight&&(i=parseInt(a.trigHeight)),trig.height>o&&(o=trig.height);var d=(0-(s-(trig.height/2+r)))/(o+i)*100;trig.trigSetPos(d,e,g,n)}trigSetPos(t,r,i,e){t>=r&&t<=i?trig.thePos[e.index]=t:t<=r?trig.thePos[e.index]=r:t>=i&&(trig.thePos[e.index]=i)}updatePos(){trig.trigs.forEach(function(t,r){if("true"==t.dataset.trigGlobal&&t.id)var i=document.documentElement.style,e="-"+t.id;else var i=t.style,e="";i.setProperty("--trig"+e,trig.thePos[r]+"%"),i.setProperty("--trig-reverse"+e,-trig.thePos[r]+"%"),i.setProperty("--trig-px"+e,trig.thePos[r]+"px"),i.setProperty("--trig-px-reverse"+e,-trig.thePos[r]+"px"),i.setProperty("--trig-deg"+e,trig.thePos[r]/100*360+"deg"),i.setProperty("--trig-deg-reverse"+e,-trig.thePos[r]/100*360+"deg")})}}const trig=new Trig;document.addEventListener("scroll",trig.trigScroll,!1),document.addEventListener("resize",trig.trigInit,!1),document.addEventListener("DOMContentLoaded",trig.trigInit,!1);
\ No newline at end of file
diff --git a/index.html b/index.html
index 6dba031..e476a97 100755
--- a/index.html
+++ b/index.html
@@ -203,10 +203,10 @@ How To Install?
Or just add one of the below CDN instead
- <script src="https://cdn.jsdelivr.net/npm/trig-js@1.8.0/dist/trig.js"></script>
+ <script src="https://cdn.jsdelivr.net/npm/trig-js@1.9.0/dist/trig.js"></script>
- <script src="https://unpkg.com/trig-js@1.8.0/dist/trig.js"></script>
+ <script src="https://unpkg.com/trig-js@1.9.0/dist/trig.js"></script>
@@ -276,7 +276,7 @@ Data Attributes
You can use the below data attributes for additional features
- <div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-global="true" data-trig> </div>
+ <div id="yourelement" data-trig-min="-100" data-trig-max="100" data-trig-offset="0" data-trig-height="0" data-trig-global="true" data-trig> </div>
diff --git a/package.json b/package.json
index 7b972fc..5717e04 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "trig-js",
- "version": "1.8.0",
+ "version": "1.9.0",
"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": "dist/trig.js",
"scripts": {
@@ -11,10 +11,22 @@
"url": "git+https://github.com/iDev-Games/trig.git"
},
"keywords": [
- "Animation",
"trigger",
"position",
- "js"
+ "css",
+ "html",
+ "design",
+ "js",
+ "frontend",
+ "simple",
+ "animation",
+ "css-animations",
+ "css-variables",
+ "scroll-animations",
+ "data-attribute-html",
+ "animate-on-scroll",
+ "reveal-animation",
+ "aos-animation"
],
"author": "iDev Games",
"license": "MIT",
diff --git a/src/trig.js b/src/trig.js
index 4c22513..4c6d4ce 100755
--- a/src/trig.js
+++ b/src/trig.js
@@ -1,91 +1,97 @@
-/* Trig.js v1.8.0 by iDev Games */
-const trig = {
- trigs: [],
- thePos: [],
- documentHeight: 0,
- observer: new IntersectionObserver(function(entries) {
- trigObject.trigEntries(entries);
- trigObject.updatePos(trigObject.trigs);
- trigObject.observer.disconnect();
- }),
- trigIntersecting: function(entry) {
- if (entry.isIntersecting) {
- entry.target.classList.add("trig");
- } else {
- entry.target.classList.remove("trig");
- }
- },
- trigInit: function() {
- trigObject.trigs = document.querySelectorAll('.enable-trig,[data-trig]');
- trigObject.documentHeight = innerHeight;
- trigObject.trigScroll();
- },
- trigScroll: function(){
- if (trigObject.trigs) {
- trigObject.trigs.forEach(function(element, index) {
+/* Trig.js v1.9.0 by iDev Games */
+class Trig
+{
+ trigs = [];
+ thePos = [];
+ height = 0;
+ observer = new IntersectionObserver(function(entries) {
+ trig.trigEntries(entries);
+ trig.updatePos(trig.trigs);
+ trig.observer.disconnect();
+ });
+ trigInit() {
+ trig.trigs = document.querySelectorAll('.enable-trig,[data-trig]');
+ trig.height = innerHeight;
+ trig.trigScroll();
+ }
+ trigScroll(){
+ if (trig.trigs) {
+ trig.trigs.forEach(function(element, index) {
element.index = index;
- trigObject.observer.observe(element);
+ trig.observer.observe(element);
});
}
- },
- trigEntries: function(entries) {
+ }
+ trigEntries(entries) {
entries.forEach(function(entry) {
- trigObject.trigIntersecting(entry);
- trigObject.trigPos(entry);
+ trig.trigIntersecting(entry);
+ trig.trigPos(entry);
});
- },
- trigSetPos: function(pos, min, max, entry) {
- if (pos >= min && pos <= max) {
- trigObject.thePos[entry.target.index] = pos;
- } else if (pos <= min) {
- trigObject.thePos[entry.target.index] = min;
- } else if (pos >= max) {
- trigObject.thePos[entry.target.index] = max;
- }
- },
- trigPos: function(entry) {
+ }
+ trigIntersecting(entry) {
+ if (entry.isIntersecting) {
+ entry.target.classList.add("trig");
+ } else {
+ entry.target.classList.remove("trig");
+ }
+ }
+ trigPos(entry) {
var offset = 0;
+ var hOffset = 0;
var min = -100;
var max = 100;
var el = entry.boundingClientRect.top;
var height = entry.boundingClientRect.height;
- if (entry.target.dataset.trigOffset) {
- offset = parseInt(entry.target.dataset.trigOffset);
+ var target = entry.target;
+ var dSet = target.dataset;
+ if (dSet.trigOffset) {
+ offset = parseInt(dSet.trigOffset);
+ }
+ if (dSet.trigMin) {
+ min = parseInt(dSet.trigMin);
}
- if (entry.target.dataset.trigMin) {
- min = parseInt(entry.target.dataset.trigMin);
+ if (dSet.trigMax) {
+ max = parseInt(dSet.trigMax);
}
- if (entry.target.dataset.trigMax) {
- max = parseInt(entry.target.dataset.trigMax);
+ if (dSet.trigHeight) {
+ hOffset = parseInt(dSet.trigHeight);
}
- if(trigObject.documentHeight > height){
- height = trigObject.documentHeight;
+ if(trig.height > height){
+ height = trig.height;
}
- var posTop = 0 - (el - ((trigObject.documentHeight / 2) + offset));
- var pos = (posTop / (height)) * 100;
- trigObject.trigSetPos(pos, min, max, entry);
- },
- updatePos: function() {
- trigObject.trigs.forEach(function(element, index) {
- if (element.dataset.trigGlobal == "true") {
+ var posTop = 0 - (el - ((trig.height / 2) + offset));
+ var pos = (posTop / (height + hOffset)) * 100;
+ trig.trigSetPos(pos, min, max, target);
+ }
+ trigSetPos(pos, min, max, entry) {
+ if (pos >= min && pos <= max) {
+ trig.thePos[entry.index] = pos;
+ } else if (pos <= min) {
+ trig.thePos[entry.index] = min;
+ } else if (pos >= max) {
+ trig.thePos[entry.index] = max;
+ }
+ }
+ updatePos() {
+ trig.trigs.forEach(function(element, index) {
+ if (element.dataset.trigGlobal == "true" && element.id) {
var el = document.documentElement.style;
var id = "-"+element.id;
} else {
var el = element.style;
var id = "";
}
- el.setProperty('--trig'+id, trigObject.thePos[index] + "%");
- el.setProperty('--trig-reverse'+id, -(trigObject.thePos[index]) + "%");
- el.setProperty('--trig-px'+id, trigObject.thePos[index] + "px");
- el.setProperty('--trig-px-reverse'+id, -(trigObject.thePos[index]) + "px");
- el.setProperty('--trig-deg'+id, ((trigObject.thePos[index] / 100) * 360) + "deg");
- el.setProperty('--trig-deg-reverse'+id, ((-(trigObject.thePos[index]) / 100) * 360) + "deg");
+ el.setProperty('--trig'+id, trig.thePos[index] + "%");
+ el.setProperty('--trig-reverse'+id, -(trig.thePos[index]) + "%");
+ el.setProperty('--trig-px'+id, trig.thePos[index] + "px");
+ el.setProperty('--trig-px-reverse'+id, -(trig.thePos[index]) + "px");
+ el.setProperty('--trig-deg'+id, ((trig.thePos[index] / 100) * 360) + "deg");
+ el.setProperty('--trig-deg-reverse'+id, ((-(trig.thePos[index]) / 100) * 360) + "deg");
});
}
-};
-
-const trigObject = Object.create(trig);
+}
+const trig = new Trig;
-document.addEventListener('scroll', trigObject.trigScroll, false);
-document.addEventListener('resize', trigObject.trigInit, false);
-document.addEventListener('DOMContentLoaded', trigObject.trigInit, false);
\ No newline at end of file
+document.addEventListener('scroll', trig.trigScroll, false);
+document.addEventListener('resize', trig.trigInit, false);
+document.addEventListener('DOMContentLoaded', trig.trigInit, false);
\ No newline at end of file