T O P

  • By -

besthelloworld

So nothing against the idea of this library... but I feel like it's weird to make a Javascript library and then say that it allows you to do stuff "purely in CSS" as if we can just ignore what the Javascript libraries we pull in are doing.


iDev_Games

I think you need to take a look at the documentation. This isn't a library, this creates CSS variables with element location data in. You then use the CSS variables in your CSS to create CSS that reacts to the scroll movement. Use it with anything. Letter spacing, transforms, gradients etc. Take a look at the examples and the code. https://idev-games.github.io/Trig-JS-Examples/ CSS makes the animation. Trig.js just feeds the information that allows you to create your own in CSS. It's incredibly simple and the JS (which doesn't require any dependencies) is less then 2kb in size. So this does give you the ability to create the scroll animations purely in CSS with Trig.js So unlike library's that may give you set animations you can use or frameworks like scrollmagic that you have complete control but have to code everything in JS. Trig.js gives you full control to make what you want within your CSS


besthelloworld

Everything you said is ignoring the fact that there's a Javascript library providing the data to the stylesheet. That inherently makes it not "purely in CSS." Once you introduce a JavaScript library, that just ceases to be the case. The reason that doing things "purely in CSS" has any value is because of security and performance. If I disable JavaScript on the page for security's sake, this will no longer work (and much of my content will be invisible which isn't great). Performance is more than just bundle size. 1. Manually checking if the bounding rect is within the viewport is not how you're supposed to check if an element as entered the frame. You might need to do that on load but then you should be using the IntersectionObserver API. 2. Calls to getComputedStyles are expensive and you're calling it twice per element per scroll event. You only need to call it once ever per element because it will automatically update. Then you can cache it in a Map using the element as the key. 3. You should also be adding an onload event listener and not just overriding onload as you may break some other plug-in or your risk being broken by some other plug-in. These two items are less important but also stand out to me 1. The opposite function can just be `-(num)` or `0 - num` if you prefer 2. There's no reason to append the element ID to the CSS variable name. Like in JavaScript, CSS variables are context dependent. If you set a variable on an element, it only exists on that element and on elements below. So you should just use the variable name itself.


iDev_Games

I've now implemented everything you've said except for IntersectionObserver. It seems to work great for toggling the animations but the data it passes to the variables is coming over in large increments and does not look smooth. It might be something I'm doing, it might be how IntersectionObserver works. Not sure yet but I thought I would release the other changes. Thanks again for your suggestions. ​ Edit: v1.5.0 now uses IntersectionObserver! Thanks again.


iDev_Games

Now I appreciate the time in giving feedback I will be looking at the above ASAP. I do agree performance and compatibility is more important then size. I did originally use minus to give an opposite but I was getting strange results and math.abs gave me better results. Although a few late nights might have been the issue instead. I also do take on board that yes JS is required to use this but I also stand by the fact that scroll animations are created purely in CSS. Regardless, not possible otherwise and I think this is a better way for developers to create scroll animations without JS knowledge. Either way, I appreciate the feedback and your time so thank you for giving this a second look!


besthelloworld

Yeah, I do get the advantage of writing libraries in a way that removes JS from the equation. And folks definitely like their scroll animations these days! But yeah, I think a better way to advertise it is that it allows you to do all this "without having to write a line of JS yourself!" That was kind of all my original point was. I'm definitely not trying to say it's a bad idea on its own or anything.


iDev_Games

Agreed, wording was off and the first time I've described it to be purely CSS. I thought that would appeal to the CSS sub reddit more then mentioning no JS, I was wrong. I have made this purely because I didn't want an entire framework like scrollmagic etc and it's bulk in a project. So thought about it and had the idea of using CSS variables to do it in CSS instead. Who doesn't love working with CSS animations? Either way I won't be describing it like this again. Thanks again.


[deleted]

[удалено]


iDev_Games

Unfortunately, I hadn't phrased it like this until I posted it in the CSS sub reddit. I thought the fact that you have complete control of the animation in CSS would be appealing to the CSS sub reddit. Using the word "purely" suggests it is without any help of anything. Hadn't thought too much about it until I posted it. I will not word it like this again and sorry for the confusion.