I tested this by disabling webgl in firefox (//about:config) and disabling hardware acceleration under chrome advanced system settings
summary of changes:
Since the background images are added at the xlarge-2 breakpoint in _home-top.scss I added a css variable for that breakpoint I adjusted the js to not load pixi at that breakpoint (home.js line #81)
Even with hardware acceleration, the filters and blurs look fine on this screen where they performed poorly on my laptop at home. I put the filters on the rays back in under the same :not(.disable-animation) condition that the animations on the rays already have.
Lastly, I think I figured out why the canvas element wasn't taking up the whole screen width, so I adjusted each canvas width to be the same App width.
The scrollTo and TweenMax.to were a real problem on my home plaptop, but I wasn't able to replicate the issue here. I commented those sections out when I looked at it in December. I could checkout how things are working on my laptop later today. reference
I tested this by disabling webgl in firefox (//about:config) and disabling hardware acceleration under chrome advanced system settings
summary of changes:
The scrollTo and TweenMax.to were a real problem on my home plaptop, but I wasn't able to replicate the issue here. I commented those sections out when I looked at it in December. I could checkout how things are working on my laptop later today. reference