Reset Flip and Scrolltrigger on window resize

[ManolisG]

Hello

 

I have a bento style gallery and on scroll the rows and columns of the gallery are changing size so the middle element is zoomed in and take full screen size. 

 

In the code pen provided you will see that everything works ok until you resize the window. 

 

I found out that if the scale option is set to true then the grid and images adapt to the new window size but images are distorted as the parent element is now scaled with a transform and I cannot have that. 

 

Is there any way of reseting Flip and ScrollTrigger to calculate everything from scratch but for the new window size? Or any other solution i'm missing at the moment?

 

Thank you very much for your help! 

See the Pen jORvPEV by Manolis-Giouvanakis (@Manolis-Giouvanakis) on CodePen

[Rodrigo]

Hi,

 

Is better in this cases to just clear the inline styles before creating the Flip animation and store everything in a GSAP Context instance in order to easily revert everything:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Here is a fork of your demo that actually uses Flip.from() instead of to(), also is a good idea to not add ScrollTrigger configuration to a Flip instance but rather to store the Flip animation in a constant and then use that in a ScrollTrigger config, because of the way Flip instances work internally:

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

 

Hopefully this helps.

Happy Tweening!

[CoreMarketing]

Hello @Rodrigo

 

Thank you very much for your answer but there are two problems: 

 

1. Since you re using scale: true, images are distorted again, although it's not really visible in your pen as it's a sky image. 

 

2. Resizing the screen works before starting the flip. When you scroll and the animation has started, any window resize breaks it again. 

 

I've updated my pen with your code and a new image that shows the distortion. 

 

 

 

BTW: This is my other account - sorry for any confusion

 

[Rodrigo]

Hi,

 

Yeah I think the issue was more an order of operation one rather than anything else. When to clear the styles from the gallery items was the key. Also I used scale: true because in your original demo you have that setting. I changed the image as well in order to make it more clear if it gets distorted as well.

 

Here is the demo updated:

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

 

Happy Tweening!

[CoreMarketing]

Hello @Rodrigo

 

That's great thank you very much for your help. Really appreciated!