There is a bug that returns to start when resizing with scrollTrigger.

[zzz999]

Hello.
I am Japanese and I am writing this question using a translation app. Therefore, please understand that I may not be able to convey the intent of your question well.

 

I think you can see the results of codepen,
This scrolltrigger's timeline reverts to the start of the animation when it is resized. Also, when resizing from mobile size to PC size, the screen does not resize, only the white margin expands.

 

Presumably, this phenomenon occurs when the width exceeds the width specified in matchmedia.

 

How can I resize it so it doesn't bug me?

 

*I would appreciate it if you could answer in sentences that are easy to translate.

See the Pen jOXOjdP by zumi999 (@zumi999) on CodePen

[GreenSock]

I’m away from my computer so I can’t dig deep on this, but it looks to me like you are creating your timeline and ScrollTrigger OUTSIDE of your matchMedia(), so they won’t get reverted when the matchMedia() no longer matches. I would strongly recommend creating your timeline INSIDE the matchMedia(). 

 

Does that help?

[zzz999]

On 8/21/2023 at 12:04 AM, GreenSock said:

I’m away from my computer so I can’t dig deep on this, but it looks to me like you are creating your timeline and ScrollTrigger OUTSIDE of your matchMedia(), so they won’t get reverted when the matchMedia() no longer matches. I would strongly recommend creating your timeline INSIDE the matchMedia(). 

Thank you for your response.
I have tried the timeline inside matchMedia() as you suggested, but the bug is not improved.
What is not good?
 

[Rodrigo]

Hi,

 

There is any chance that you could simplify your demo? Is a bit too much code and makes it a bit hard to follow.

 

Keep in mind that Jack suggested to create the timeline instance inside the MatchMedia instance:

let mm = gsap.matchMedia();

mm.add("(min-width: 768px)", () => {
  const tl = gsap.timeline();
  // ... rest of your code
});

 

Hopefully this helps.

Happy Tweening!

[zzz999]

On 8/25/2023 at 7:23 AM, Rodrigo said:

here is any chance that you could simplify your demo? Is a bit too much code and makes it a bit hard to follow.

 

Keep in mind that Jack suggested to create the timeline instance inside the MatchMedia instance:

Sorry, I wrote code that was hard to read.
I rewrote it simply.

In this case, you can also change the window width in the Image(class:travel-story) part
It goes back to the beginning of the map animation when the breakpoint is exceeded

See the Pen dywGVEE by zumi999 (@zumi999) on CodePen

[GreenSock]

@zzz999 did you try following the directions we've provided twice now? Your demo still has the timeline being created OUTSIDE the matchMedia. 

 

// BAD!
let tl = gsap.timeline({...});                   
let mm = gsap.matchMedia();
mm.add("(min-width: 768px)", () => {
  tl.to(...);
});
                        

// GOOD             
let mm = gsap.matchMedia();
mm.add("(min-width: 768px)", () => {
  let tl = gsap.timeline({...});  
  tl.to(...);
});
      

 

[zzz999]

12 hours ago, GreenSock said:

 did you try following the directions we've provided twice now? Your demo still has the timeline being created OUTSIDE the matchMedia. 

 

 

I made the same mistake when I was rebuilding it. My apologies.
I fixed codepen but the same bug is still there.

 

See the Pen dywGVEE by zumi999 (@zumi999) on CodePen

[GreenSock]

There are still breaking errors in your basic JavaScript in that CodePen. Like you reference a function called matchMediaOrNot() which doesn't exist. Please provide a minimal demo that very clearly illustrates the problem with as little code as possible and we'd be happy to take a look. 

 

It also looked very strange to me that you've got a timeline with a scrubbed ScrollTrigger attached that you also have an addPause() inside. Why would you do that? There's no such thing as saveStyle: true either. 

 

I forked your CodePen and commented out the broken function call - maybe you can fork this and provide very specific instructions about what is breaking and how to reproduce the problem? 

See the Pen eYbZZQG?editors=0110 by GreenSock (@GreenSock) on CodePen

[zzz999]

It appears that the code was not working properly.
How can I eliminate the resizing bug in this animation?

 

See the Pen xxmVNxg by zumi999 (@zumi999) on CodePen

[Rodrigo]

Hi,

 

There are still some issues with your example. The target of this (and other instances that have the same target) is not in the DOM:

gsap.set(".map-main-content", {
  opacity: 0
});

There is no element with that particular class in your HTML so GSAP is throwing a warning there.

 

I forked your example and removed all the instances with that class and this is the result:

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

 

Everything seems to work the way it should.

 

I'm still not 100% clear on what the issue is here, so please be sure to provide a fully working example and a clear description of the problem.

 

Happy Tweening!

[zzz999]

Sorry. It still had extra stuff on it.

The problem this time is that it goes back to the beginning of the MAP when it gets smaller than the breakpoints set in matchmedia.

If the window is smaller than 910px or 767px.
It goes back to the beginning of the MAP even if it is in the middle of the timeline.

How can I maintain the timeline even when the window is smaller than the breakpoint?

[Rodrigo]

Hi,

 

This is kind of the expected behaviour actually. This is a super simplified explanation of what happens in cases when you create different ScrollTrigger instances using MatchMedia. When you load the site, regardless of the screen size the ScrollTrigger instances are created, because you have pin set to true in all of them, it adds the extra scroll space to accommodate for that. Then you scroll down and then you pass the breakpoint. At this point all the ScrollTrigger instances are killed and their respective pin spaces removed as well, then the new ones are created. In this process when one ScrollTrigger instance is killed the height of the document changes and the available scroll distance is reduced because the pin spacer is removed as well. So at this point the document naturally is placed at a scroll position based on that. Then the new ScrollTrigger instance is created, here in order to work around some issues ScrollTrigger has to scroll to the top in order to make the calculations and create everything again then it returns to the scroll position the document had when it was created. As you can see this is not at all related to something GSAP or ScrollTrigger are doing, just the way things work considering the changes made to accommodate everything, check this super simple example that illustrates that happening:

 

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

 

In this cases if the height of the viewport changes as well, that adds yet another wrinkle to the whole thing. I tried a few approaches without a lot of success. I'll keep trying and post back if I make any progress. The one thing I can think is to record the progress of the ScrollTrigger instance and when the MatchMedia breakpoint is passed you can get the scroll position of the new ScrollTrigger instance and then scroll to that particular position, but as I mentioned I haven't been 100% successful with that approach at the moment.

 

Hopefully this clear things up.

Happy Tweening!

[zzz999]

Thanks for the detailed explanation.

I understood what you explained, and I too have tried to record the progress of the ScrollTrigger instance and get the scroll position of the new ScrollTrigger instance when the MatchMedia breakpoint is crossed, and scroll to that specific position I have also tried to get the scroll position of the new ScrollTrigger instance and scroll to that specific position, but it is not working at the moment.

 

I look forward to your good report.