Wizard of Oz Posted April 21, 2022 Posted April 21, 2022 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 Posted April 21, 2022 Posted April 21, 2022 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. } 2 1
Wizard of Oz Posted April 21, 2022 Author Posted April 21, 2022 Odd! This is what I see: https://www.awesomescreenshot.com/video/8525945?key=710ee4d697da566f85201eaf56aa4b92 on all browsers.
PointC Posted April 21, 2022 Posted April 21, 2022 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 Posted April 21, 2022 Posted April 21, 2022 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. ?♂️
Solution OSUblake Posted April 22, 2022 Solution Posted April 22, 2022 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 Posted April 22, 2022 Author Posted April 22, 2022 Yep! Works with ScrollTrigger 3.10.4. Thanks guys
Wizard of Oz Posted May 2, 2022 Author Posted May 2, 2022 Both my pen and @OSUblake's pen lack the parallax effect again. Very odd as it seems to work on & off..
OSUblake Posted May 2, 2022 Posted May 2, 2022 I'm not seeing any issues in my pen. ?♂️ https://gyazo.com/bfc6971238cce697bd401cc69db030fd
Wizard of Oz Posted May 2, 2022 Author Posted May 2, 2022 This is what I see: https://www.awesomescreenshot.com/video/8702988?key=0755f915b07dd435506b7dd7304a3735 ?
GreenSock Posted May 2, 2022 Posted May 2, 2022 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 Posted May 2, 2022 Author Posted May 2, 2022 @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 Posted May 3, 2022 Posted May 3, 2022 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 Posted May 3, 2022 Author Posted May 3, 2022 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 1
GreenSock Posted May 3, 2022 Posted May 3, 2022 I notice a few problems: You've got NESTED effects. That won't work. In other words, you have a data-speed inside another element with a data-speed. 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. 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. 2
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now