ScrollTrigger onresize

[geogeo]

Hi there,

 

I've created a basic codepen to demonstrate my issue. 

 

I'm trying to get my ScrollTrigger to run when the screen size is > 1200px. If the screensize starts < 1200px it works as expected and doesnt run, if I then resize the screen to > 1200px the scrollTrigger initiates and works as expected. However if I start with the screen > 1200px and resize to < 1200px, the scrollTrigger animation is still present, but I would expect it not to be. 

 

I'm assuming this is more my bad JS than an issue with scrollTrigger, but i've searched around and cant find the answer!

 

Any help appreciated! 

 

Many thanks,

Georgia

See the Pen MWeQZJO by georgiac44 (@georgiac44) on CodePen

[akapowl]

 

Hey Georgia,

 

take a look at ScrollTrigger's matchMedia().

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.matchMedia()

 

I am pretty sure it is exactly what you are looking for.

 

You won't even have to think about how to activate/deactivate your ScrollTrigger's on different screensizes anymore, because it basically handles all that for you.

 

 

[geogeo]

Hey akapowl! 

 

That is exactly what I need thanks so much! 

 

However I'm having some issues with the "savestyles" part. I've updated the codepen to show: 

Blue box when the screen is < 999px and red box when screen > 1000px

 

Starting from full screen I would assume to see that after the user has scrolled the red box is rotated 19deg. As soon as I start resizing the screen the red box styles are reverted and the box is no longer rotated, I would assume this would only happen at the breakpoint 1000px? 

 

Starting from a small screen < 999px, after the scroll the blue box runs as expected, but when resizing the screen after I pass the breakpoint the red box isnt rotated, which is the outcome I would expect. 

 

Am I looking at this wrong? 

 

Many thanks,
 

Georgia

 

[akapowl]

 

Hey Georgia,

 

I remember reading in the thread posted below, that there are some problems in the current version with .from() tweens inside matchMedia().

 

 

 

I can't tell for sure if this is also the case in your scenario - someone else would have to approve that.

 

But I managed to get to the behaviour, that is to be expected with the tweens setup as you did, by getting rid of the saveStyles and applying a 

 

immediateRender: false

 

to your .from()-tween-ScrollTrigger.

 

See the Pen 10362835bbe38fe85b03a0fae0e7ce58 by akapowl (@akapowl) on CodePen

 

 

 

If this is related to the problems in the current version, it should be resolved in the upcoming version, as @Greensock mentioned in that thread above.

 

You can preview it with this link.

 

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

 

 

 

...also I went ahead and tested it myself just now. Looks, like it was related to that problem.

 

With the latest beta, things work just fine without the 'immediateRender: true' and with the saveStyles, just as you intended initially. But you'd have to take the saveStyles outside of the matchMedia() because otherwise nothing would be displayed, when you start on a width below 1000px and then resize to a width above 1000px.

 

See the Pen d32c9fe05f75237f16563036e38be3cc by akapowl (@akapowl) on CodePen

 

 

 

Cheers

Paul