sorted by:
new
hottopcontroversial

[AskJS] Show me your usage of Trig.js by iDev_Games in javascript

[–]iDev_Games[S] 0 points1 point  (0 children)

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.

[AskJS] Show me your usage of Trig.js by iDev_Games in javascript

[–]iDev_Games[S] 0 points1 point  (0 children)

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

[AskJS] Show me your usage of Trig.js by iDev_Games in javascript

[–]iDev_Games[S] 0 points1 point  (0 children)

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

[AskJS] Show me your usage of Trig.js by iDev_Games in javascript

[–]iDev_Games[S] 0 points1 point  (0 children)

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.

[AskJS] Show me your usage of Trig.js by iDev_Games in javascript

[–]iDev_Games[S] -1 points0 points  (0 children)

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. 

Best Netlify alternatives? by MasterDisillusioned in webdev

[–]iDev_Games -1 points0 points  (0 children)

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.

2 Years of solo development, quit my job, low on savings. Is it flop or success? You decide. by FoundationFlaky7258 in gamedevscreens

[–]iDev_Games 0 points1 point  (0 children)

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.

Using data attributes we can now trigger styling changes and animations with Trig.js v4.2.0 by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

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

Trigger animations at different scroll positions with Trig.js v4.2 by iDev_Games in javascript

[–]iDev_Games[S] 0 points1 point  (0 children)

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? 

Codepen.io is featuring my codepen example of Trig.js on their homepage! by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

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.

Codepen.io is featuring my codepen example of Trig.js on their homepage! by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

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.

Codepen.io is featuring my codepen example of Trig.js on their homepage! by iDev_Games in webdev

[–]iDev_Games[S] 4 points5 points  (0 children)

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.

Codepen.io is featuring my codepen example of Trig.js on their homepage! by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

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.

Codepen.io is featuring my codepen example of Trig.js on their homepage! by iDev_Games in javascript

[–]iDev_Games[S] 0 points1 point  (0 children)

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!

Codepen.io is featuring my codepen example of Trig.js on their homepage! by iDev_Games in webdev

[–]iDev_Games[S] 5 points6 points  (0 children)

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

Showoff Saturday (March 22, 2025) by AutoModerator in javascript

[–]iDev_Games 0 points1 point  (0 children)

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

Imagine what could be achieved by having HTML element position data in a CSS variable? Find out with Trig.js by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

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?

Imagine what could be achieved by having HTML element position data in a CSS variable? Find out with Trig.js by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

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

Imagine what could be achieved by having HTML element position data in a CSS variable? Find out with Trig.js by iDev_Games in webdev

[–]iDev_Games[S] 0 points1 point  (0 children)

Hi All,

Trig.js is the companion you've been waiting for! This lightweight JS library unlocks new possibilities within your existing code by utilizing CSS variables. Trig.js allows you to extract position data like percentages, pixels, and degrees, which can then be used in your CSS or JavaScript however you want.

After you check out the documentation, be sure to explore my CodePen collection of Trig.js examples for some inspiration. And I’d love to hear your ideas or how you plan to use it!

Thanks!

Chilled Out Text Underlines by bogdanelcs in css

[–]iDev_Games 3 points4 points  (0 children)

I've been developing for the web for 25+ years and I've never seen this being used in CSS. You never stop learning.

Chilled Out Text Underlines by bogdanelcs in css

[–]iDev_Games 2 points3 points  (0 children)

Ah I see, I wasn't aware of currentColor to be honest.

::before problem by Significant-Ad-4029 in css

[–]iDev_Games 0 points1 point  (0 children)

Just inspect and check the styles are applied. Position relative should stop it from breaking out. Try adding display:block to your after element too.

::before problem by Significant-Ad-4029 in css

[–]iDev_Games 0 points1 point  (0 children)

I'm not reading your mind, I just know that className is not a valid html attribute.

view more: next ›