Skip to content

Commit

Permalink
v2.1.0 - Added position classes to the body.
Browse files Browse the repository at this point in the history
  • Loading branch information
@iDev-Games
iDev-Games committed Apr 8, 2023
1 parent 0841976 commit 581ae4d
Show file tree
Hide file tree
Showing 5 changed files with 93 additions and 43 deletions.
5 changes: 4 additions & 1 deletion README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js
# What is Trig.js?
Trig.js is a super simple, efficient and lightweight way of making CSS scroll animations that react to the position of your HTML elements. You can also use Trig.js to trigger CSS animations once an element appears on screen.

Using nothing but the power of CSS, HTML and Trig.js. You can make the same effects as you see here: https://idev-games.github.io/Trig-JS/! Not just that, Trig.js is really lightweight with a filesize of less than 3kb! Trig.js is created with javascript and doesn't require any dependencies.
Using nothing but the power of CSS, HTML and Trig.js. You can make the same effects as you see here: https://idev-games.github.io/Trig-JS/! Not just that, Trig.js is really lightweight with a filesize of ![npm bundle size](https://img.shields.io/bundlephobia/min/trig-js)! Trig.js is created with javascript and doesn't require any dependencies.

Trig.js is really simple and quick to work with. You can use Trig.js even if you arn't familiar with javascript.

Expand Down Expand Up @@ -110,6 +110,9 @@ var(--trig-deg-reverse) /* Reverse degrees */
# Scroll Direction
Trig.js creates a class of "trig-scroll-up" or "trig-scroll-down" onto the body of the document depending on the last scroll direction.

# Scroll Position
Trig.js creates a class of "trig-scroll-top" or "trig-scroll-bottom" onto the body of the document depending on the last scroll position. To give the ability to make something happen at different break points down the page. The classes "trig-scroll-25", "trig-scroll-50" and "trig-scroll-75" are added to the body of the document depending on the scoll position percentage down the page.

# Data Attributes
You can use the below data attributes for additional features

Expand Down
2 changes: 1 addition & 1 deletion dist/trig.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 13 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@ <h2>What is Trig.js?</h2>
Trig.js is a super simple, efficient and lightweight way of making CSS animations that react to the position of your HTML elements. You can also use Trig.js to trigger CSS animations once an element appears on screen.
</div>
<div class="box fadeIn animdelay1" data-trig>
Using nothing but the power of CSS, HTML and Trig.js. You can make the same effects as you see here! Not just that, Trig.js is really lightweight with a filesize of less than 3kb! Trig.js is created with javascript and doesn't require any dependencies.
Using nothing but the power of CSS, HTML and Trig.js. You can make the same effects as you see here! Not just that, Trig.js is really lightweight with a filesize of <img alt="npm bundle size" src="https://img.shields.io/bundlephobia/min/trig-js">! Trig.js is created with javascript and doesn't require any dependencies.
</div>
<div class="box fadeIn animdelay2" data-trig>
Trig.js is really simple and quick to work with. You can use Trig.js even if you arn't familiar with javascript.
Expand Down Expand Up @@ -273,6 +273,18 @@ <h2>Scroll Direction</h2>
<p>Trig.js creates a class of "trig-scroll-up" or "trig-scroll-down" onto the body of the document depending on the last scroll direction.</p>
</div>
</div>

<hr/>

<div class="container alignCenter">
<div class="box title" id="direction" data-trig-min="20" data-trig-offset="400" data-trig>
<h2>Scroll Position</h2>
</div>
<div class="box fadeIn" data-trig>
<p>Trig.js creates a class of "trig-scroll-top" or "trig-scroll-bottom" onto the body of the document depending on the last scroll position. To give the ability to make something happen at different break points down the page. The classes "trig-scroll-25", "trig-scroll-50" and "trig-scroll-75" are added to the body of the document depending on the scoll position percentage down the page.</p>
</div>
</div>

<hr/>

<div class="container alignCenter">
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "trig-js",
"version": "2.0.2",
"version": "2.1.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": "src/trig.js",
"scripts": {
Expand Down
113 changes: 74 additions & 39 deletions src/trig.js
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
/* Trig.js v2.0.2 by iDev Games */
/* Trig.js v2.1.0 by iDev Games */
class Trig
{
trigs = [];
thePos = [];
height = 0;
pos = 0;
scrollDir = ["trig-scroll-down", "trig-scroll-up"];
observer;
trigInit() {
trig.observer = new IntersectionObserver(trig.trigObserver);
trig.trigs = document.querySelectorAll('.enable-trig,[data-trig]');
trig.trigs = document.querySelectorAll('body,.enable-trig,[data-trig]');
trig.height = innerHeight;
trig.trigScroll();
}
Expand Down Expand Up @@ -46,38 +47,44 @@ class Trig
trig.observer.disconnect();
}
trigIntersecting(entry) {
if (entry.isIntersecting) {
entry.target.classList.add("trig");
} else {
entry.target.classList.remove("trig");
if(document.body != entry.target){
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 options = { offset: 0, height: 0, min: -100, max: 100 };
Object.keys(options).forEach(function(key) {
options[key] = trig.trigAttributes(entry, options, key);
});
var el = entry.boundingClientRect.top;
var height = entry.boundingClientRect.height;
var dSet = entry.target.dataset;
if (dSet.trigOffset) {
offset = parseInt(dSet.trigOffset);
}
if (dSet.trigMin) {
min = parseInt(dSet.trigMin);
}
if (dSet.trigMax) {
max = parseInt(dSet.trigMax);
}
if (dSet.trigHeight) {
hOffset = parseInt(dSet.trigHeight);
}
if(trig.height > height){
height = trig.height;
}
var posTop = 0 - (el - ((trig.height / 2) + offset));
var pos = (posTop / (height + hOffset)) * 100;
trig.trigSetPos(pos, min, max, entry.target);
if(document.body == entry.target){
var posTop = 0 - (el);
var pos = (posTop / (height - ((trig.height)))) * 100;
} else {
var posTop = 0 - (el - ((trig.height / 2) + options.offset));
var pos = (posTop / (height + options.height)) * 100;
}
trig.trigSetPos(pos, options.min, options.max, entry.target);
}
trigAttributes(entry, options, name){
var dSet = entry.target.getAttribute("data-trig-"+name);
if (dSet) {
if(dSet.match(/^[0-9]+$/) != null){
return parseInt(dSet);
} else {
return dSet;
}
} else {
return options[name];
}
}
trigSetPos(pos, min, max, entry) {
if (pos >= min && pos <= max) {
Expand All @@ -88,6 +95,37 @@ class Trig
trig.thePos[entry.index] = max;
}
}
trigSetBody(element){
var bo = element;
var cl = bo.classList;
if(cl.contains(trig.scrollDir[0])){
cl.replace(trig.scrollDir[0], trig.scrollDir[1]);
}
if(!cl.contains(trig.scrollDir[0]) && !cl.contains(trig.scrollDir[1])){
cl.add("trig-scroll-up");
}
if(trig.thePos[element.index] == 0){
cl.add("trig-scroll-top");
} else {
cl.remove("trig-scroll-top");
}
if(trig.thePos[element.index] == 100){
cl.add("trig-scroll-bottom");
} else {
cl.remove("trig-scroll-bottom");
}
var split = [25,50,75];
for (let i = 0; i < 4; i++) {
trig.trigSplit(split[i], element.index, cl);
}
}
trigSplit(split, index, cl){
if(trig.thePos[index] >= split){
cl.add("trig-scroll-"+split);
} else if(trig.thePos[index] < split) {
cl.remove("trig-scroll-"+split);
}
}
updatePos(element) {
if (element.dataset.trigGlobal == "true" && element.id) {
var el = document.documentElement.style;
Expand All @@ -96,23 +134,20 @@ class Trig
var el = element.style;
var id = "";
}
var bo = document.body.classList;
if(bo.contains(trig.scrollDir[0])){
bo.replace(trig.scrollDir[0], trig.scrollDir[1]);
}
if(!bo.contains(trig.scrollDir[0]) && !bo.contains(trig.scrollDir[1])){
bo.add("trig-scroll-up");
if(document.body == element){
trig.trigSetBody(element);
} else {
el.setProperty('--trig'+id, trig.thePos[element.index] + "%");
el.setProperty('--trig-reverse'+id, -(trig.thePos[element.index]) + "%");
el.setProperty('--trig-px'+id, trig.thePos[element.index] + "px");
el.setProperty('--trig-px-reverse'+id, -(trig.thePos[element.index]) + "px");
el.setProperty('--trig-deg'+id, ((trig.thePos[element.index] / 100) * 360) + "deg");
el.setProperty('--trig-deg-reverse'+id, ((-(trig.thePos[element.index]) / 100) * 360) + "deg");
}
el.setProperty('--trig'+id, trig.thePos[element.index] + "%");
el.setProperty('--trig-reverse'+id, -(trig.thePos[element.index]) + "%");
el.setProperty('--trig-px'+id, trig.thePos[element.index] + "px");
el.setProperty('--trig-px-reverse'+id, -(trig.thePos[element.index]) + "px");
el.setProperty('--trig-deg'+id, ((trig.thePos[element.index] / 100) * 360) + "deg");
el.setProperty('--trig-deg-reverse'+id, ((-(trig.thePos[element.index]) / 100) * 360) + "deg");
}
}
const trig = new Trig;

document.addEventListener('scroll', trig.trigScroll, false);
document.addEventListener('resize', trig.trigInit, false);
document.addEventListener('DOMContentLoaded', trig.trigInit, false);
document.addEventListener('DOMContentLoaded', trig.trigInit, false);

0 comments on commit 581ae4d

Please sign in to comment.