Update Values of Gsap and ScrollTrigger on resize?

[keanureefs]

Hello Forum...thanks for the help.

 

I'm scrubbing through a background image sprite sheet on scroll in the example given. All seems to work out fine except if the user resizes windows, then the values for some of the sizing and sequencing are not updated so the scrubbing misaligns. Im probably missing something here but wondering if these variables can be updated. I realize it might cost performance wise but am looking for suggestions.  I tried kill() and restart() as well as refresh() on ScrollTrigger but  to no avail. I definitely feel like I am missing something here.

 

While on the topic, I might be able to save myself some pain and scrub through actual video? Is this possible using ScrollTrigger? To scrub through an mp4 or webm using the video tag?   Thanks!

 

 

See the Pen OJMZdJj by onetimeuser (@onetimeuser) on CodePen

[ZachSaucier]

Hey keanureefs and welcome to the GreenSock forums.

 

Can you please explain step by step how to recreate the issue using your demo? It seems to be working properly to me.

 

36 minutes ago, keanureefs said:

I might be able to save myself some pain and scrub through actual video? Is this possible using ScrollTrigger? To scrub through an mp4 or webm using the video tag?

Sure, you can do that instead if you want. You just have to update the currentTime of the video.

[keanureefs]

Zach,

 

Thanks. Yeah you are right. The example posted here seems to work just fine mainly because the height of the embed is static.  I think if you 'edit on codepen' and change the height of the window then you'll see what I mean.  All in all, it works fine until the window's height is changed by dragging it. That's when the calculations for the sprite sheet and the size of the scrub area misalign.  

 

Thanks again.

j

[ZachSaucier]

This is what the invalidateOnRefresh property is for. I just realized it's not documented so we'll get to that soon. But using it you can set functional values on your tweens that have scrollTriggers and it will refresh the values on refresh. In your case you also have to recalculate offset_value so I added a listener to update that and the width:

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

[keanureefs]

Ahhhhh, brilliant.  Thanks, Zach.  So helpful! 🙏

[Akunin]

Can anybody help with block on site - https://akunin94.github.io/Atol/ (https://o525.ru/2ZR2d65zUUxlXPIMlktGjJTsMco).

When i change orientation on my phone, animation works wrong. 

Code:

gsap.from('.partners__item', {scrollTrigger: {

        trigger: '.partners__inner',

        id: "trigger1",

        toggleActions: 'restart pause restart pause',

        invalidateOnResize: true,

    },  left: '43%', top: '40%', duration: 1.2, opacity: '0'});

[ZachSaucier]

Hey @Akunin and welcome to the GreenSock forums.

 

Please create a minimal demo of the issue and create a new thread about your issue like this thread covers:

 

[akapowl]

 

+1 for what Zach said.

 

Maybe it's just something small causing your issues, like for instance, that there is no such thing as invalidateOnResize ( you probably meant invalidateOnRefresh ), maybe it's something totally different though. And that's where a minimal demo in a fresh thread really comes in handy to help finding a solution.

[Akunin]

5 hours ago, ZachSaucier said:

Please create a minimal demo of the issue and create a new thread about your issue like this thread covers:

My site - https://akunin94.github.io/Atol/ . Scroll to section https://o525.ru/2ZR2d65zUUxlXPIMlktGjJTsMco and then change orientation on mobile. And then look at https://o525.ru/2ZR2d65zUUxlXPIMlktGjJTsMco again.

I hope I could explain

 

 

[GreenSock]

Hi @Akunin. Please create a minimal demo - it's far too cumbersome to try to troubleshoot an entire live site. 

 

Perhaps you want to look into ScrollTrigger.matchMedia()