Disabling ScrollSmoother effects when window width changes

[henery]

Hi everyone,

 

I'm trying to find a way to disable ScrollSmoother effects (like data speed) globally whenever the device window width is smaller than a certain value.

 

Here's a demo using the Nuxt.js starter (I will be using Nuxt for the real project) in which I try to set up an event listener to get the device's width and then pass a computed property (useEffects) to the vars object that sets the effects to true or false. After this I refresh the scrollTrigger, but it doesn't seem to work, as the effects remain enabled. 

 

Am I missing something? Is there a particular way to do this? 

 

Thanks for the help!

 

[Cassie]

I'm pretty baffled here.

 

I've hard coded in the vars and it's still doing parallax? 

https://codesandbox.io/s/zen-https-uyxwdq?file=/components/GSAPScrollSmoother.vue:580-783

 

There's a lot of code here, are you overriding the vars anywhere else?

 

effects:false should have this effect so something's not right in your demo. I can't track it down though

See the Pen yLvamJK?editors=0010 by GreenSock (@GreenSock) on CodePen

[henery]

Thanks for the answer Cassie. You're right, it looks like for some reason passing effects: false to the vars object doesn't work. So actually my question doesn't matter that much!

 

Most of the demo isn't my code, I've just written the event listener logic over a fork of this ScrollSmoother+Nuxt integration example that @OSUblake posted. I'm going to try and look for the reason why effects: false doesn't work but maybe he knows?

[Cassie]

Aha, excellent. Over to Blake then!

[PointC]

This thread may help. We discussed using media queries to change the data speed/lag to new values by looping through and killing the old ScrollTriggers.