Bad perfomance in Safari,Firefox.

[silencerspirit]

Guys, hello! Please help me to understand what is the reason for such poor performance in animation!? This bug in Safari and Firefox, on Chromium(Google chrome, Yandex browser) - good. this is my code:

const headerAnimationBackground = basicScroll.create({
    elem: document.querySelector('.header__row'),
    from: 500,
    to: 1000,
    props: {
        '--rotate': {
            from: '-90deg',
            to: '0',
        },
        '--position': {
            from: '-100%',
            to: '0',
        },
    }
})
const headerAnimationWidth = basicScroll.create({
    elem: document.querySelector('.header__row'),
    from: 0,
    to: 500,
    props: {
        '--max-width': {
            from: `${$('.header .container').outerWidth()}px`,
            to: '1200px',
        },
    }
})
const headerAnimationLine = basicScroll.create({
    elem: document.querySelector('.header__row'),
    from: 800,
    to: 1000,
    props: {
        '--padding': {
            from: '20px 80px 0 80px',
            to: '0 80px 0 80px',
        },
    }
})

if (window.matchMedia("(min-width: 1200px)").matches) {
    headerAnimationLine.start()
    headerAnimationWidth.start()
    headerAnimationBackground.start()
}

And video

[electerious]

There're a lot of reasons that could cause a poor performance. This could be relevant for you:

Only animate transform and opacity and use will-change to hint browsers about the kind of changes. This way the browser can setup appropriate optimizations ahead of time before the element is actually changed.

Also: Animating from '20px 80px 0 80px' to '0 80px 0 80px' is not supported by basicScroll. It's interesting to see that it's actually working. Try to animate only padding-top or even better: Don't animate padding for performance reasons.

This site looks nice. Let me know when it's finished, I would love to take a look at it :)

[jamiechong]

@electerious I'm also having performance issues on my 2014 Macbook Pro. To me it seems like more of a javascript performance issue vs a CSS transform issue. I notice your code continuously calls requestAnimationFrame (and does indeed check to see if anything needs to be done on that particular repaint) rather than only calling it on scroll. There could be a way to improve performance there.

I'm trying to do some basic image parallax here http://preview3.hippocurious.com/, but for me it's really choppy in all browsers. Works great on mobile devices however.

Any thoughts?

  basicScroll.create({
    elem: document.querySelector('.hero-image .image'),
    from: 'top-top',
    to: 'bottom-top',
    direct: true,
    props: {
      '--hero-y': {
        from: 0,
        to: '200px',
        timing: 'sineInOut'
      }
    }
  }).start();

  document.querySelectorAll('.project img').forEach(function(elem) {
    basicScroll.create({
      elem: elem,
      from: 'bottom-top',
      to: 'top-bottom',
      direct: true,
      props: {
        '--project-y': {
          from: '20px',
          to: '-20px',
          timing: 'sineInOut'
        }
      }
    }).start();
  });

  document.querySelectorAll('.lax-fade').forEach(function(elem) {
    basicScroll.create({
      elem: elem,
      from: 'top-bottom',
      to: 'top-middle',
      direct: true,
      props: {
        '--the-opacity': {
          from: 0.1,
          to: 1.0,
          timing: 'sineInOut'
        }
      }
    }).start();
  });

[silencerspirit]

@electerious

Thanks for the feedback, it was easier. I used filter: blur() on pseudo elements and because of this there were huge drawdowns in performance. It concerned the way all of the libraries that I tried(ScrollMagic + anime.js, ScrollMagic + GSAP, basicScroll)

Thank you for your work, I really liked your library. I will continue to use it! ;)

Here is the markup https://bit.ly/2WIAuRL ;)

There is still a lot of work to optimize, but it will be something like this.

[electerious]

@jamiechong requestAnimationFrame executes at the beginning of a frame, making it more performant than a scroll handler. I did some testing, but couldn't find anything bad on your site. It scrolls with 60fps (most of the time). Safari however does some repaints in the hero area which could be worth a look.

[electerious]

@silencerspirit I like it. Nice work! :)

[sunnyt7]

@jamiechong requestAnimationFrame executes at the beginning of a frame, making it more performant than a scroll handler. I did some testing, but couldn't find anything bad on your site. It scrolls with 60fps (most of the time). Safari however does some repaints in the hero area which could be worth a look.

I have no connection to OP, but fwiw http://preview3.hippocurious.com/ scrolls really choppy for me as well. At least near the top and bottom of the page... once you get to "Thoughtful Design" in the middle it's smooth for a few hundred pixels, then gets choppy again.

(I'm on a Matebook Pro X in Firefox)