storeforhumans.com - Demo parallax effect is not working

[webcompat-bot]

URL: https://storeforhumans.com/blogs/blog-for-humans/william-blake-sea-of-time-and-space

Browser / Version: Firefox 84
Operating System: Windows 10
Tested Another Browser: Yes Chrome

Problem type: Something else
Description: Demo of parallax effect stops working after refreshing; wrong effect
Steps to Reproduce:
The listed URL shows an adaptation of a painting so it creates a sense of depth for the user while scrolling in the browser. This effect works before refreshing the page; the effect disappears after refreshing the page. The strength of the effect also seems different i.e. less than in Google Chrome 87

Browser Configuration

• None

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report, I was able to reproduce the issue. It can be seen that the man dressed in red reaches the man in the water while scrolling down the page.

Tested with:
Browser / Version: Firefox Nightly 86.0a1 (2020-12-21)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis for further investigation.

[karlcow]

They are using
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.2/ScrollTrigger.min.js

which register the event when loading the page with xa(Pe, 'mousewheel', Ia),

but mousewheel has been deprecated. if they replace by this line

`xa(Pe, 'wheel', Ia),`

The site will work as expected. Note that there is a bug for a legacy support of mousewheel.

The site is using

/*!
 * ScrollTrigger 3.4.2
 * https://greensock.com
 * 
 * @license Copyright 2020, GreenSock. All rights reserved.
 * Subject to the terms at https://greensock.com/standard-license or for Club GreenSock members, the agreement issued with that membership.
 * @author: Jack Doyle, jack@greensock.com
 */
!

Which is a library by @jackdoyle as mentioned in #57284

I opened an issue greensock/GSAP#434
and a pull request for it greensock/GSAP#435

[webcompat-bot]

Generate outreach template

[karlcow]

If I'm not wrong the photo in the About Us of https://storeforhumans.com/pages/about-us
has similarities with @bjones3
if yes could you fix the site and replace mousewheel by wheel in scrolltrigger.js

Thanks.

[bjones3]

??????????

[karlcow]

This is being fixed in the new version of the library.
greensock/GSAP#434 (comment)

[karlcow]

@bjones3 you are a different Brian Jones? So sorry for bothering if it was the case, I will try to find the right person.

[softvision-raul-bucata]

The issue seems to be fixed. The layout of the change and colors of the picture has changed a bit, but the page orientation of the characters is the same.

Firefox:

Chrome:

Tested with:

Browser / Version: Firefox Nightly 102.0a1 (2022-05-03) (64-bit) / Chrome Version Version 101.0.4951.54 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64

Closing this as FIXED.

[inv_18/2022]