{"id":27892568,"url":"https://github.com/idev-games/trig-js","last_synced_at":"2025-05-05T13:16:26.957Z","repository":{"id":144719658,"uuid":"615432200","full_name":"iDev-Games/Trig-JS","owner":"iDev-Games","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.","archived":false,"fork":false,"pushed_at":"2025-03-28T21:26:01.000Z","size":4674,"stargazers_count":137,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-29T21:48:25.554Z","etag":null,"topics":["animate-on-scroll","animation","aos-animation","css","css-animations","css-variables","data-attribute-html","design","frontend","html","js","reveal-animation","scroll-animations","simple"],"latest_commit_sha":null,"homepage":"https://idev-games.github.io/Trig-JS/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/iDev-Games.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-03-17T17:19:43.000Z","updated_at":"2025-04-16T11:31:04.000Z","dependencies_parsed_at":"2024-05-19T21:28:55.075Z","dependency_job_id":"1ce5d777-6cc4-4bab-bebb-f6e8c831b15a","html_url":"https://github.com/iDev-Games/Trig-JS","commit_stats":null,"previous_names":["idev-games/trig"],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDev-Games%2FTrig-JS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDev-Games%2FTrig-JS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDev-Games%2FTrig-JS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/iDev-Games%2FTrig-JS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/iDev-Games","download_url":"https://codeload.github.com/iDev-Games/Trig-JS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252504252,"owners_count":21758662,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animate-on-scroll","animation","aos-animation","css","css-animations","css-variables","data-attribute-html","design","frontend","html","js","reveal-animation","scroll-animations","simple"],"created_at":"2025-05-05T13:16:26.217Z","updated_at":"2025-05-05T13:16:26.951Z","avatar_url":"https://github.com/iDev-Games.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/iDev-Games/Trig-JS/blob/main/logo.png\"\u003e\n\u003c/p\u003e\n\n\n[![iDev-Games - Trig-JS](https://img.shields.io/static/v1?label=iDev-Games\u0026message=Trig-JS\u0026color=blue\u0026logo=github)](https://github.com/iDev-Games/Trig-JS \"Go to GitHub repo\")\n[![stars - Trig-JS](https://img.shields.io/github/stars/iDev-Games/Trig-JS?style=social)](https://github.com/iDev-Games/Trig-JS)\n\n[![Stargazers repo roster for @iDev-Games/Trig-JS](https://reporoster.com/stars/iDev-Games/Trig-JS)](https://github.com/iDev-Games/Trig-JS/stargazers)\n\n[![GitHub tag](https://img.shields.io/github/tag/iDev-Games/Trig-JS?include_prereleases=\u0026sort=semver\u0026color=blue)](https://github.com/iDev-Games/Trig-JS/releases/)\n[![License](https://img.shields.io/badge/License-MIT-blue)](#license)\n![npm bundle size](https://img.shields.io/bundlephobia/min/trig-js)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/ce378a75b36040f9a820005742a225ac)](https://app.codacy.com/gh/iDev-Games/Trig-JS/dashboard?utm_source=gh\u0026utm_medium=referral\u0026utm_content=\u0026utm_campaign=Badge_grade)\n[![Maintainability](https://api.codeclimate.com/v1/badges/0d58ec40b6b2e8231b19/maintainability)](https://codeclimate.com/github/iDev-Games/Trig-JS/maintainability)\n\n![npm](https://img.shields.io/npm/dt/trig-js?logo=NPM) ![npm](https://img.shields.io/npm/dw/trig-js?logo=NPM) ![npm](https://img.shields.io/npm/dm/trig-js?logo=NPM) ![npm](https://img.shields.io/npm/dy/trig-js?logo=NPM) ![jsDelivr hits (npm)](https://img.shields.io/jsdelivr/npm/hm/trig-js)\n[![libs.tech recommends](https://libs.tech/project/615432200/badge.svg)](https://libs.tech/project/615432200/trig-js)\n\nTrig.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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/iDev-Games/Trig-JS/raw/main/creative.gif\"\u003e\n\u003c/p\u003e\n\n\nSee it in action here: https://idev-games.github.io/Trig-JS/\n\nFind more examples here: https://github.com/iDev-Games/Trig-JS-Examples\n\nFind our codepen examples here: https://codepen.io/collection/wkBWzm\n\nKeep up to date with tutorials, examples and informtion on my dev.to: https://dev.to/idevgames\n\nTrig-Animations.css documentation can be found here: https://idev-games.github.io/Trig-JS/animations.html\n\nYou can download from Github.\n\nInstall with NPM\n\n```css\nnpm i trig-js\n```\n\nUse Trig.js from a CDN\n```\nhttps://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js\n```\n\n# What is Trig.js?\nTrig.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.\n\nUsing 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.\n\nTrig.js is really simple and quick to work with. You can use Trig.js even if you arn't familiar with javascript. \n\nTrig.js is the perfect solution for CSS scroll animations in any project by developers of any skill level for both light or heavy usage. Making it the perfect alternative to libraries like scrollmagic or GSAP scrolltrigger for most of your website animation needs.\n\n# Trig-Animations.css\nConfigurable predefined scroll animations for your projects\nhttps://idev-games.github.io/Trig-JS/animations.html\n\n# How To Install?\nAll you need to do is add the dist trig.js file into your projects JS folder and add the following code with your trig.js location as the src. Put this code in to your head HTML tags\n\n```html\n\u003cscript src=\"/js/trig.min.js\"\u003e\u003c/script\u003e\n```\n\nOr just add a CDN instead\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/trig-js/src/trig.min.js\"\u003e\u003c/script\u003e\n```\n\n# How To Use?\nTo activate trig.js add the data attribute \"data-trig\" or a class \"enable-trig\" to your html element. To trigger animations trig.js will place classes of \"trig\", as well as \"trig-up\" or \"trig-down\", onto your element when it appears on screen and depending from which direction. \n\n```html\n\u003cdiv class=\"fadeIn\" data-trig\u003e \u003c/div\u003e\n```\n```css\n.fadeIn{ \n    opacity:0;\n}\n.fadeIn.trig{ \n    animation: fadeIn 1s normal forwards ease-in-out; \n}\n@keyframes fadeIn { \n  0% { \n    opacity:0;\n  } \n  100% { \n    opacity:1; \n  } \n}\n```\n\n# Scroll Animations\nTrig.js calculates the percentage that the element is on screen and creates CSS variables that you can use with CSS transform etc.\n\n```html\n\u003cdiv class=\"element\" data-trig data-trig-var=\"true\"\u003e \u003c/div\u003e\n```\n```css\n.element{ \n    transform: translateX( var(--trig) );\n}\n```\n\nThe CSS variables you can use by adding data-trig-var=\"true\", data-trig-pixels=\"true\" or data-trig-degrees=\"true\" are:\n\n```css\nvar(--trig) /* Percentage */\nvar(--trig-reverse) /* Reverse percentage */\nvar(--trig-px) /* Pixels */\nvar(--trig-px-reverse) /* Reverse pixels */\nvar(--trig-deg) /* Degrees */\nvar(--trig-deg-reverse) /* Reverse degrees */\n```\n\nThe data attribute will also update in increments of 10 so you can use CSS attribute selectors like:\n\n```css \n[data-trig-var=\"50\"],\n[data-trig-var=\"60\"],\n[data-trig-var=\"70\"],\n[data-trig-var=\"80\"],\n[data-trig-var=\"90\"],\n[data-trig-var=\"100\"]{\n  transform: translateX( var(--trig) );\n} \n``` \n\nfor more control.\n\n# Scroll Direction\nTrig.js creates a class of \"trig-scroll-up\" or \"trig-scroll-down\" onto the body of the document depending on the last scroll direction.\n\n# Scroll Position\nTrig.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 scroll position percentage down the page.\n\n# Data Attributes\nYou can use the below data attributes for additional features\n\n```html\n\u003cdiv 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\u003e \u003c/div\u003e\n```\n\nCheck out the code of the documentation as an example.\n\nhttps://github.com/iDev-Games/Trig-JS/blob/main/index.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidev-games%2Ftrig-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidev-games%2Ftrig-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidev-games%2Ftrig-js/lists"}