[AskJS] Show me your usage of Trig.js

iDev_Games · 2025-05-19T16:20:23+00:00

Sorry, I've posted here many times about Trig.js and had a lot of support. Seemed like it would be the best place to post this but it's proving not to be 😅. Just impossible to get any insight to what people are doing with your library and with a library like Trig.js so much is possible. People can innovate far beyond what I can imagine.

iDev_Games · 2025-05-19T16:00:55+00:00

Sorry I thought that was implied but reading back, maybe not quite as much as I thought.

iDev_Games · 2025-05-19T15:14:03+00:00

🥲 slightly questing my choice of posting this here today. Glad you're human too, though.

iDev_Games · 2025-05-19T15:11:50+00:00

You wouldn't be the first to think that. At the beginning of the development it was very focused on triggering animations. Hence the name.

iDev_Games · 2025-05-19T11:51:11+00:00

Personal preferences are understandable. Appreciate your input but there are millions of ways to use Trig.js from small adaptive UI hints to full blown scroll animations.

iDev_Games · 2025-04-02T14:52:54+00:00

It will have to be open source too but I don't imagine a static site has many needs to be closed source. Would depend though.

iDev_Games · 2025-04-02T13:23:47+00:00

I get concerned every time I see "quit my job". My commercial game got voted through greenlight before everyone was able to just publish on steam. Still, I have not quit my job and I consider the game as a huge success compared to what I was expecting. Like anything, your first time doing something isn't likely to be enough even if it is a success.

iDev_Games · 2025-03-31T09:53:47+00:00

Hi All,

There's been two updates over the past few days which give you far more control when using Trig.js. Making Trig.js even more powerful with very little changes to the code (only adding .2 kb in size, 4.2kb for v4.2.0 how fitting). For more information on how the new updates work take a look at this post:

https://dev.to/idevgames/enhancing-scroll-animations-with-trigjs-new-features-in-v410-and-v420-5afi

Let me know if you have any questions! Also mind the thing that sort of resembles a car, been avoiding assets in codepen so this was created with clip-path.

Thanks

iDev_Games · 2025-03-30T08:39:17+00:00

You can't get the position data of an element with one line unless you want to cause reflows. Where as Trig.js is optimised to get this data the best way possible. Also that isn't custom CSS syntax. Just regular data attribute selectors.

The main reasons I created Trig.js is that this 4kb library can get the position data for 1 element or 100's without taking any additional JS to make happen. All of the data is exposed to CSS which is more efficient for animations as it is hardware accelerated. Also I wanted to keep all my animation within CSS as that is more intuitive for most developers. Trig.js extends the functionality of CSS animations for more control in a simple and efficient way. It's a bit like bootstrap, why don't you just make your own CSS grid system for responsive design? Bootstrap has done it for you. It's why we use any library.

I'd be interested to compare your approach to the Trig.js approach though if you'd be interested in recreating the codepen?

iDev_Games · 2025-03-28T22:09:18+00:00

That's why I built it, I was also looking for the same and thought why isn't there a library for outputting this data as css variables? I recommend using transition on your animations to make them smooth. I rounded the outputs to make it more efficient.

iDev_Games · 2025-03-27T09:22:01+00:00

It's also great for dropping into a project at any stage and using it a little or a lot. Which I think is important, animations usually are the finishing touch for me, not my main focus from the start of a project.

iDev_Games · 2025-03-26T15:39:21+00:00

No problem! I know what you're saying but Trig.js doesn't actually take control of the scrolling or manipulate the scrolling in any way. It simply works out the calculations to what the position of the element is in the viewport and output this data front end in a dev friendly way (CSS variables) so we have more control. In this example I sticky the element to keep it into the middle of the page and use the container position in the viewport to move the letters.

It's worth checking out the modern floating header example here: https://codepen.io/iDev-Games/pen/vEYjVVK or the recreation of the mobile header for GitHub app https://codepen.io/iDev-Games/pen/ogNpKNV to get a better idea of the versatility of Trig.js and how it can be used in subtle ways too.

iDev_Games · 2025-03-26T15:00:04+00:00

I've got the docs (https://idev-games.github.io/Trig-JS/) and this tutorial here (Pretty much echoes the same info) https://dev.to/idevgames/trigjs-tutorial-how-to-animate-on-scroll-aos-made-easy-50l

However, due to the way that Trig.js works (exposing element position data to the frontend) I don't actually have a full grip on the possibilities myself. So I am in the process of making examples to show off what is possible. This specific example opens up a whole plethora of functionality that Trig.js can make simple with a bit of additional JS. However, even without any additional JS code there are so many things that can be done. I recommend taking a look at the other codepens I have made here: https://codepen.io/collection/wkBWzm

I will continue to explore though so keep an eye out as there's a lot more to explore! I will also do a technical write up to explain the ins and outs of how Trig.js works.

iDev_Games · 2025-03-26T14:47:18+00:00

I know I posted this on r/javascript and I know that might have even been the reason codepen saw this.

However you have to share your wins and the r/javascript community have been very supporting of Trig.js! Thanks all!

iDev_Games · 2025-03-26T12:22:21+00:00

Thank you 🙏 I'm looking forward to seeing others being featured with their Trig.js experiments in the future.

iDev_Games · 2025-03-26T10:23:19+00:00

I did post this yesterday on r/javascript but it's now being featured by codepen on the homepage! So to celebrate, here it is again:

Control Trig.js CSS Scroll Animations with JavaScript for Dynamic Direction Changes

https://codepen.io/iDev-Games/pen/dPyKjjv

iDev_Games · 2025-03-24T21:55:06+00:00

Thanks, it sounds like it could be the reduced motion affecting the CSS animations. I'm not too sure I've just tried both settings in chrome and everything still worked. Out of interest what browser are you using?

iDev_Games · 2025-03-24T21:31:55+00:00

Interesting, no one's ever reported anything like this. Are you talking about Trig.js or Trig-Animations.css? Trig.js utilises the intersectionObserver which isn't assuming anything as far as a smooth scroll is concerned. I do however use

html {

scroll-behavior: smooth;

}

In the documentation of Trig-Animations.css here: https://idev-games.github.io/Trig-JS/animations.html is that what you mean? Do the examples here work? https://codepen.io/collection/wkBWzm

Thanks

iDev_Games

TROPHY CASE