15 comments

  • Hamish TaplinHamish Taplin, 8 months ago

    What is it about using CSS vars that has performance advantages over traditional methods?

    1 point
    • Tobias Reich, 8 months ago

      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

      0 points
  • Surjith S MSurjith S M, 8 months ago

    Not smooth on Mozilla Windows - https://screenshots.firefox.com/Z3ZFK8Cj7BdO5gtJ/basicscroll.electerious.com

    0 points
    • Tobias Reich, 8 months ago

      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).

      0 points
  • Jamie LovelaceJamie Lovelace, 8 months ago

    oh that is real clever, good thinking! I cant believe how smooth it is

    0 points
  • Gavin AnthonyGavin Anthony, 8 months ago

    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!

    0 points
  • Mick NMick N, 8 months ago

    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.

    0 points
  • Brandon ZellBrandon Zell, 8 months ago

    Very smooth animations. This is great!

    0 points
  • Tobias Reich, 8 months ago

    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!

    0 points
    • Joel MarchandJoel Marchand, 8 months ago

      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.

      Thanks!

      0 points
      • Brandon ZellBrandon Zell, 8 months ago

        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.

        0 points
      • Tobias Reich, 8 months ago

        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! :)

        0 points