Library bugged on firefox about lax.js

[alexfoxy]

How many browsers have you tried it in...? It's pretty simple at it's core so I don't see why it wouldn't perform well in other browsers, but I haven't tried it in Firefox.

[WhereCanI]

I have only seen it lag in Chrome on android and in Safari on iPad. On desktop it works great for me no matter which browser I use. 🙂

[alexfoxy]

Closing due to lack of information.

[jojobagings78]

It lags on firefox a lot, IE and mobile browsers.

[alexfoxy]

@jojobagings78 do you have an example?

The demo (https://alexfox.dev/laxxx/) is silky smooth on my iPhone.

Perhaps you’re doing something wrong.

[WhereCanI]

I think you might be right about that. I have a scroll effect on my website sliding the headlines up faster than the content plus bringing the opacity down. At the same time I at moving my background image slowly depending on how much you scroll. So it might be because I am stretching the browser and not something with the module.

[alexfoxy]

If you can share the code I can take a look?

…

On Mon, 27 Jan 2020 at 20:53, Mike Andersen ***@***.***> wrote: I think you might be right about that. I have a scroll effect on my website sliding the headlines up faster than the content plus bringing the opacity down. At the same time I at moving my background image slowly depending on how much you scroll. So it might be because I am stretching the browser and not something with the module. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#78>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABFBXD3DILQVIIYT53ERRTQ75CVXANCNFSM4KI2Q4IA> .

[jojobagings78]

I have fixed the issue however I cam across another issue now. On initial page load the offset of when the animation triggers is wrong. If I change page and go back with a route on react it then is correct.

[jojobagings78]

Any idea @alexfoxy ?

[alexfoxy]

Hey, it’s a little bit hard to help without seeing the code. Can you make a code pen or something with the issue for me to take a look at?

…

On Sat, 8 Feb 2020 at 01:09, jojobagings78 ***@***.***> wrote: Any idea @alexfoxy <https://github.com/alexfoxy> ? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#78>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABFBXDJGEIOJEJV5N6XCFLRBYA2XANCNFSM4KI2Q4IA> .

[jojobagings78]

I am using SSR and this is what is used.

import lax from 'lax.js';

componentDidMount(){
  lax.setup()
  const update = () => {
    lax.update(window.scrollY)
    window.requestAnimationFrame(update)
  }
  window.requestAnimationFrame(update)
}

 <div id="animation_parralax">
  <div className="lax" data-lax-translate-y="(vh) 0, (-elh) 200" data-lax-opacity="offset=100" data-lax-anchor="#animation_parralax">IMAGE HERE</div>
  <div className="lax" data-lax-translate-y="(vh) 0, (-elh) -200" data-lax-opacity="offset=100" data-lax-anchor="#animation_parralax">IMAGE HERE</div>
 </div>

[jojobagings78]

@alexfoxy I believe the above is correct

[jojobagings78]

I was able to fix the issue however on using this library on a ssr website it seems to require you to resize page for the parralax to work correctly any idea around this ?