SvgDraw Window Resize Issues

[Tribius]

Hi!

 

I'm making a sort of navigation bar for a website but I'm having some issues when resizing the window with the SVG bugging out. Is their any way to update scrollTrigger after resize? I've tried multiple things I've learned here in the forums but nothing seems to work. Thanks!

See the Pen VwRwyrd by jonasTribius (@jonasTribius) on CodePen

[mvaneijgen]

13 minutes ago, Tribius said:

SVG bugging out

What exactly do you mean with this? I've been resizing the browser from big to small and vice versa and I see no issue. Any particular browser version/OS you are looking at?

 

Maybe you have an issue with the default ease of "power1.out" if you set it to "none" it will be more consistent with a scrubbed ScrollTrigger, eg the rate it will grow will be linear for the whole duration. Hope it helps and happy tweening! 

 

See the Pen NWJWXEq?editors=0100 by mvaneijgen (@mvaneijgen) on CodePen

[Tribius]

16 hours ago, mvaneijgen said:

What exactly do you mean with this? I've been resizing the browser from big to small and vice versa and I see no issue. Any particular browser version/OS you are looking at?

 

 

 

This is what I mean. When the SVG changes height (which it should do since it's supposed to cover the height of a div like you see in my screenshot from the real website) it starts over in the middle. I'm using Chrome.
 

[Rodrigo]

Hi,

 

I've been playing with your and Mitchel's demo for a bit and can't seem to reproduce the issue you mention.

 

I tested in the latest Chrome and Firefox on Ubuntu 20 & 22.

 

Maybe I'm missing something or you could give us the steps to reproduce this.

 

Happy Tweening!

[Tribius]

On 12/26/2023 at 9:42 PM, Rodrigo said:

Hi,

 

I've been playing with your and Mitchel's demo for a bit and can't seem to reproduce the issue you mention.

 

I tested in the latest Chrome and Firefox on Ubuntu 20 & 22.

 

Maybe I'm missing something or you could give us the steps to reproduce this.

 

Happy Tweening!

I did a screenrecording to show you the issue. I'm also running the latest Chrome version.

[GreenSock]

You've got things set up so that the actual length of the SVG path changes on window resize, thus you need your tween to re-calculate the drawSVG length. I'd recommend doing a .fromTo() so you can control the start/end, and set invalidateOnRefresh: true on your ScrollTrigger: 

See the Pen oNVjdNX?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Is that better? 

[Tribius]

4 hours ago, GreenSock said:

You've got things set up so that the actual length of the SVG path changes on window resize, thus you need your tween to re-calculate the drawSVG length. I'd recommend doing a .fromTo() so you can control the start/end, and set invalidateOnRefresh: true on your ScrollTrigger: 

 

 

 

Is that better? 

That seemes to remove that issue but now when I resize the window the lines that aren't supposed to be drawn out yet, are. I'll show you in another screenrec:

[GreenSock]

Ah yes, that should be fixed in the next release which you can preview at: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

(you may need to clear your cache)

 

As a workaround in the current version, you can just add this to your ScrollTrigger: 

onRefresh: self => self.animation.progress(self.progress)

See the Pen gOEaEoa?editors=1010 by GreenSock (@GreenSock) on CodePen

 

Better? 

[Tribius]

8 hours ago, GreenSock said:

Ah yes, that should be fixed in the next release which you can preview at: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js

 

(you may need to clear your cache)

 

As a workaround in the current version, you can just add this to your ScrollTrigger: 

onRefresh: self => self.animation.progress(self.progress)

 

 

 

Better? 

Worked like a charm. Thanks a lot you guys, best support there is.