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!

Thank you very much both! Apparently i must have missed that in the documentation.

Hello I have a grid of, let's say 100 items (.grid-post) and I use the batch() method of scrollTrigger this way: ScrollTrigger.batch(".grid-post", { onEnter: elements => { gsap.from(elements, { y: 60, autoAlpha: 0, stagger: 0.1, duration: 0.5, }); }, once: true }); It works just fine when you first load the page and start scrolling down. However when you have scrolled further down the page and then you hit refresh, since the browser remembers your scroll position, you have to wait for all the animations to happen from the beginning of the grid causing a big delay in actually viewing the items that are in viewport. Is there any way of using the isInViewport() with the batch() method to just limit the batch with elements that are in viewport downwards? All the previous ones can be shown without animation as i'm not interested in onEnterBack animations. Unfortunately, I cant give you a CodePen as it doesn't keep the scroll position when you hit refresh on the browser and I hope you understand what I'm after. Any help would be appreciated as I'm quite fresh to GSAP. Thanks!