What is it about using CSS vars that has performance advantages over traditional methods?
Here're two benefits:
The same variable can be used in multiple properties. Updating a variable automatically updates all properties it has been used in. You don't need to update the CSS of multiple elements anymore. Example: The scrolling effect of the shapes on the top of the site happens by updating only ONE variable.
The styling is part of your CSS, not JS. All your styles are in one place and you can tell how a element behaves just by looking at your CSS.
Here're a few more benefits: https://medium.com/@electerious/the-power-of-css-variables-6c4e4ebaf279
really clever thinking to use css variables for parallax animations. would be really curious to see how this could integrated as a react component, too. nice work!
oh that is real clever, good thinking! I cant believe how smooth it is
Not smooth on Mozilla Windows - https://screenshots.firefox.com/Z3ZFK8Cj7BdO5gtJ/basicscroll.electerious.com
Are you talking about the edges of the rectangle? This usually happens when you rotate a box via CSS. There's sadly nothing I can do about it. It depends on the browser rendering and screen resolution (retina & not retina).
yeah could be. chrome, its smooth
Ok this is really nice!
Thanks for sharing, I might look at incorporating this in to a future project. 17.6kb for the minified JS is a reasonable hit for something so smooth on all devices.
Let me know when you use it. I'm curious to see what people can do with it :)
Very smooth animations. This is great!
Thanks! Glad you like it :)
Made a site for my parallax JS scrolling library.
basicScroll adjusts CSS variables depending on the scroll position and allows to build butter butter-smooth animations.
Have been working on the site for a while now and I'm very happy with the result :) Hope you like it, too. Feedback is always welcome!
This is looking so promising, thanks for all the great work!
One question: how does this handle loads/reloads when the page is somewhere in the middle? I notice when I refresh the site the parallax elements disappear on reload. I've also found that some parallax libraries flash wrongly placed elements when reloading or don't engage the position until scrolled.
I'm seeing that too. Scroll half way down, reload, and the twirling box doesn't show up again.
Ended up having to do the "empty cache and hard-reload" to get the box back.
Elements should be placed correctly when you reload the page.
Seems to be a wired bug in Chrome only. I've tested the basicScroll demos and all of them work fine. Must be an issue with my implementation on the site. Really interesting. I will take a look at it. Thanks for letting me know! :)