ScrollSmoother parallax not working

[Wizard of Oz 31 Likes (Newbie)]

Hi, any idea why my parallax here suddenly stopped working? 

 

Also, is  @media (prefers-reduced-motion) built into scrollSmoother?

 

Thanks  

See the Pen ZEvjjGy?editors=1010 by martinkariuki7-the-looper (@martinkariuki7-the-looper) on CodePen

[Cassie 5,148 Likes (Superhero)]

Looks like it's working to me. And no - you have to do a check yourself.

 

const animationIsOk = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
).matches;

if (animationIsOk) {
  // do all the animation.
}

 

[Wizard of Oz 31 Likes (Newbie)]

Odd! This is what I see: https://www.awesomescreenshot.com/video/8525945?key=710ee4d697da566f85201eaf56aa4b92 on all browsers. 

[PointC 14,188 Likes (Superhero)]

hmmm... I looked at this earlier today and it was fine, but now I'm seeing the same thing as @Wizard of Oz. Seems like none of the effects are working.

[PointC 14,188 Likes (Superhero)]

I forked the pen and checked debug mode - same thing - no effects.

 

Pulled the whole project down locally - works perfectly with my downloaded Club version of ScrollSmoother 3.10.4.

 

Using the ScrollSmoother file from CodePen (also 3.10.4) - no effects in local testing. Weird. 🤷‍♂️

[OSUblake 18,477 Likes (Superhero)]

9 hours ago, PointC said:

Using the ScrollSmoother file from CodePen (also 3.10.4) - no effects in local testing. Weird. 🤷‍♂️

 

I think the demo just needed the beta version of ScrollTrigger 3.10.4.

 

https://assets.codepen.io/16327/ScrollTrigger.min.js

 

See the Pen NWXmPdJ by GreenSock (@GreenSock) on CodePen

 

[Wizard of Oz 31 Likes (Newbie)]

Yep! Works with ScrollTrigger 3.10.4. Thanks guys

[Wizard of Oz 31 Likes (Newbie)]

Both my pen and @OSUblake's pen lack the parallax effect again. Very odd as it seems to work on & off..

[OSUblake 18,477 Likes (Superhero)]

I'm not seeing any issues in my pen. 🤷‍♂️

https://gyazo.com/bfc6971238cce697bd401cc69db030fd

 

 

 

[Wizard of Oz 31 Likes (Newbie)]

This is what I see: https://www.awesomescreenshot.com/video/8702988?key=0755f915b07dd435506b7dd7304a3735 🤔

[GreenSock 18,285 Likes (Superhero)]

I can't reproduce the issue. @Wizard of Oz are you absolutely positive that you're using the latest version of all the GSAP files (3.10.4)? Any other secrets to getting the problem to show up? 

[Wizard of Oz 31 Likes (Newbie)]

@GreenSock  Sorry chief! No secrets, none that I can think of atleast 😶 The screen recording is from the pen by Greensock, which I have not touched. I'm viewing this on a Mac, chrome browser version 100.0.4896.127  from Norway ( though I doubt this has anything to do with it ). 

 

All the assets seem alright https://www.awesomescreenshot.com/image/26566601?key=d272e5fe2bafbe72ab7ba4c9fb5cc444

[GreenSock 18,285 Likes (Superhero)]

Yeah, my guess is that you've got a cached version of one or more of the files. Please do a hard-refresh or clear your cache to make absolutely sure you're getting the latest files. Or change the cache-busting URL parameter. 

[Wizard of Oz 31 Likes (Newbie)]

Seems like it's a screen resolution thing. It works well when I zoom out to 80%, https://www.awesomescreenshot.com/video/8708860?key=9a802bbfc56f23a2d1b6cb01b447765e 

[GreenSock 18,285 Likes (Superhero)]

I notice a few problems: 

1. You've got NESTED effects. That won't work. In other words, you have a data-speed inside another element with a data-speed. 
2. You didn't define a wrapper or content which is fine if you use an id of smooth-wrapper and smooth-content (defaults), but you used a CLASS instead. 
3. You don't have a height or width applied to your images, so until the image is fully loaded, those measurements will be off. It should still work eventually because ScrollTrigger forces a refresh on the window's "load" event but I'm just mentioning this because it's typically a good idea to define a width/height on image elements if possible. 

[Wizard of Oz 31 Likes (Newbie)]

Ahhh! There you have it. Thanks Jack