v4.2.0 - Sets the data-attribute to increments of 10 for more control

Author: iDev-Games

README.md

@@ -95,8 +95,6 @@ To activate trig.js add the data attribute "data-trig" or a class "enable-trig"
 }
 ```
 
-The classes of "trig-up" and "trig-down"
-
 # Scroll Animations
 Trig.js calculates the percentage that the element is on screen and creates CSS variables that you can use with CSS transform etc.
 
@@ -120,6 +118,21 @@ var(--trig-deg) /* Degrees */
 var(--trig-deg-reverse) /* Reverse degrees */
 ```
 
+The data attribute will also update in incremants of 10 so you can use CSS attribute selectors like:
+
+```css 
+[data-trig-var="50"],
+[data-trig-var="60"],
+[data-trig-var="70"],
+[data-trig-var="80"],
+[data-trig-var="90"],
+[data-trig-var="100"]{
+  transform: translateX( var(--trig) );
+} 
+``` 
+
+for more control.
+
 # 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.
 

dist/trig.min.js

@@ -130,7 +130,7 @@
                 top:0;
                 left:0px;
                 background-image:url("assets/img/wheel.png");
-                background-size: auto 100%;
+                background-size: contain;
                 background-position: center;
                 background-repeat: no-repeat;
                 transform: translateX(calc(var(--trig) - 75%)) rotate(calc(var(--trig-deg)));
@@ -387,7 +387,7 @@ <h1 id="logo" data-trig-min="30" data-trig>Trig.js</h1>
 
                     <hr id="headerLine" data-trig-min="20" data-trig />
 
-                    <h2 id="documentation" data-trig-min="20" data-trig>Documentation <sup>v4.1.1</sup></h2>
+                    <h2 id="documentation" data-trig-min="20" data-trig>Documentation <sup>v4.2.0</sup></h2>
                 </div>
             </div>
 
@@ -498,6 +498,7 @@ <h2>Scroll Animations</h2>
                     <div class="listItem">
                         --trig-deg-reverse
                     </div>
+                    <p>The data attribute will also update in incremants of 10 so you can use CSS attribute selectors like <span class="listItem">[data-trig-var="50"]{ }</span> for more control.</p>
                 </div>
             </div>
 

index.html

@@ -1,6 +1,6 @@
 {
   "name": "trig-js",
-  "version": "4.1.1",
+  "version": "4.2.0",
   "description": "Trig.js powers dynamic, CSS-driven animate-on-scroll effects using CSS variables and element position data, making AOS effortless. Create custom animations in CSS or use trig-animations.css for ready-made effects—full control or quick setup. Perfect for storytelling websites.",
   "main": "src/trig.js",
   "repository": {

package.json

@@ -1,4 +1,4 @@
-/* Trig.js v4.1.1 by iDev Games */
+/* Trig.js v4.2.0 by iDev Games */
 class Trig
 {
     trigs = [];
@@ -214,7 +214,8 @@ class Trig
     setCSSVariables(el, id, properties, element) {
         Object.entries(properties).forEach(([attr, { key, value, reverse }]) => {
             if(el.getPropertyValue(key) != value){
-                if (element.dataset[attr] === "true") {
+                if (element.dataset[attr]) {
+                    element.dataset[attr] = Math.round(parseInt(value) / 10) * 10;
                     el.setProperty(key + id, value);
                     el.setProperty(key + id + "-reverse", reverse);
                 }
@@ -241,4 +242,4 @@ const trig = new Trig;
 
 window.addEventListener("scroll", trig.trigScroll, { passive: true });
 window.addEventListener('resize', trig.trigWindowHeight, { passive: true });
-window.addEventListener('load', trig.trigInit, { passive: true });
+window.addEventListener('load', trig.trigInit, { passive: true });