Fisher666

Hello! Thanks for the great solution, it has saved me a lot of time. Everything worked perfectly until I created multiple layouts, it took me a while until i got a positive result. At the end i recreated the ScrollSmoother on the layout change in every layout . mounted() { this.$scrollSmoother.create(); }, beforeDestroy() { this.$scrollSmoother.kill(); }, https://codesandbox.io/s/sad-bhaskara-tl1ds2 If there is a better way, please correct me, if not i hope it will save some time for others.

Thank you very much @GreenSock! Awesome workaround, problem solved.

Thank you for explaining about the state and image rendering, it makes things more clear. But in your pen you can also observe the same behavior if one of the bigger size images are clicked first - first flip is freezing for a split sec, if the light-weight image is clicked first animation is smooth. I tried to play the animation in Chrome, Edge, Opera and Mozilla. Only in Mozilla animation was smooth if first flipped item is the big one.

Like here if you start with the smaller size image first flip is smooth and if continue flipping the bigger size images also flip smooth. If you start with bigger image first flip freezes. These are the same 4mb images, but it did the same with 200kb which I do not consider big at all🙄. https://codepen.io/Fishers666/pen/powLJLo

Thanks for clearing things out. In the original project I had active class declared before original class and cause of laziness used important 🤦‍♂️. Originally my images are 100kb to almost 1mb. I compressed them and converted to webp and got to 50kb -400kb and now if I start with the one that's 50kb it flip smooth, if I start with bigger ones it still freezes on first flip. And question why only first image freezes still stands.

Hello! Ill get straight to the point. When flipping first item, it freezes for a split sec, the rest are flipping smooth afterwards. I bet you guys know what's going on there. I also have a side question about overflow. Is it possible to preserve overflow:hidden on container(img-wrap) wile flipping? At the moment image(child of the container being flipped) is visible full height when flipping and at the end of animation overflowing parts is hidden again. Ill explain my end goal so it's more clear what's going on. Clicking on small image it goes to the right column and becomes a big image, current big image moves to the left column. Overflow is important, because the big image will be looping/sliding from bottom to top. Made the pen just to isolate the problem.

@Cassie Hey! Today I got a project where Draw SVG plugin would make my life a lot easier, so I've joined club GreenSock faster than I thought. That also means that I will implement Flip solution You showed in my current project :). I am really excited about this purchase, like a kid with a new toy.

The Flip version is definitely superior, thanks for making that pen. As for overflow-hidden, that was one of my first thoughts, but it kind of didn't feel right :).

You got me on the right track, and I found a solution. I noticed that in last demo I posted, after invalidate() I am missing an overlay and with clicking on ball div with toggle direction everything actually work, so I made an independent tween for overlay and everything is working as expected.:) Thank you both for your time! This forum is the best! https://codepen.io/Fishers666/pen/yLbZpEz?editors=1111

Thank you for pointing out toggle direction and especially about showing how I can use scroll scroll trigger here. Both of these solutions fits in perfectly, but the problem about .to tween remembering positions from first render still persist. I look forward to see your Flip demo.

Thank you for fast response! I made another pen so you could get the idea of what I'm trying to do. When user clicks on envelope icon , div that contains it scales up and transforms to a rectangle and form fades in(left some parts out of the pen). I didn't use scroll trigger, because I don't want the ball div to get back in position while it is scaled if user opens form(scales up ball) for example in mid-page and scrolls back to top with ball being scaled-up. As for using invalidate(), this is best I could come up with, it resets starting position, which is exactly what I wanted but popFormTl.reverse() doesn't work 2nd time. If I could get some hint how to make it work more than once, I would be thankful. As for Flip Plugin I definitely will take a look, but at the moment I am not a member of Club GreenSock(I think it is only matter of time, cause I enjoy GSAP more and more), so it will not be used in this project. https://codepen.io/Fishers666/pen/oNWmBVd?editors=1111

Hello! I enjoy reading this forum for a wile now, and it have helped a lot. Thank you for that. So, the ball remember position from which it got scaled first time, for example if I play and than reverse the scaling animation when ball is in corner, it will start and end in corner also when clicked in starting position. I tried experimenting with clearProps and invalidate(), but I'm missing something...