search

janpaepke / ScrollMagic

The javascript library for magical scroll interactions.
http://ScrollMagic.io
Other
14.9k stars 2.17k forks source link

General Firefox Issues #875

Open doughballs opened 5 years ago

doughballs commented 5 years ago

Firstly....I love this library! Kudos to janpaepke. I hope to have a great showcase site soon.

I just wanted to start a conversation about performance issues in Firefox and how people have overcome them. Specifically, Firefox seems to struggle with multiple transitions at the same time, in a way that Chrome and Safari don't. I'm very new to ScrollMagic so I don't know it's limitations yet.

Here is the code that's producing jitters:

 myAnimation.to(".my-svg", 1, {scale: 7, opacity: 0.5})
     .to(".my-photo", 1, {opacity: "0.8", scale: 1}, 0)
     .to(".my-progress-bar", 1, {width:"100vw"}, 0);

I can provide a pen but I don't think it's necessary. Here are the transitions:

  1. SVG is scaled and faded (it is kind of a 'watermark')
  2. An image behind this is scaled from 1.2 down to it's natural size (1), and made slightly translucent so the background colour can show through.
  3. A progress bar move left to right to show the user where the animation is up to.

As I stated Chrome and Safari handle these multiple transitions with ease. Firefox is borderline unusable. In fact I will 100% have to remove some of the transitions for Firefox. I tried losing one of the two transitions from the first two elements - either the scroll or the opacity - and performance improved when it was just opacity, but it still struggled with just the scale.

Is this a well known Firefox thing - not being able to process multiple transitions at once? Are there certain transitions that it struggles with? Others that it's comfortable with? Is there a way to approach this slightly differently to make it smoother? I was thinking separating the 3 transitions out, even though they are overlaid and happen at the same time...would FF handle them better separately?

Any insight appreciated. I'm gonna dig into the docs and build some variations in the meantime.

rrabillo commented 5 years ago

Same here, perfs seems bad on firefox. Can't tell if its scrollmagic specific, since even GSAP animations aren't as smooth as in chrome or safari.

rrabillo commented 5 years ago

To be more precise, in my case, the issues seems to appear only on macOS. Seems much better on windows