First item flipped lag a little

[Fisher666]

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.

See the Pen powaqMB by Fishers666 (@Fishers666) on CodePen.

[nico fonseca]

Hey @Fisher666 You have images of 4.4MB, I changed them and the transitions worked well. If you want to animate images it is recommended to optimise their weight.
The overflow is preserved in the transition, the problem is that you can't see it because you set the height property with !important and you should NEVER do that on your css, even less if you need to animate that property later. ?

See the Pen 2bc450a7d05187e2c8109438a9096b88 by nicofonseca (@nicofonseca) on CodePen.

[Fisher666]

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.

[Fisher666]

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?.

 

See the Pen powLJLo by Fishers666 (@Fishers666) on CodePen.

 

[OSUblake]

It's hard to answer that question. The browser handles the renderering, and we don't know what it's doing and how prioritizes stuff. 

[GreenSock]

It looks to me like you're not doing your flip correctly - you're getting the state once initially and always reusing that instead of doing it on each click to ensure that it's using the CURRENT state. And since all the images are affected, you should include them all in the state (you were only doing one). You also don't need nested: true, but you do need absolute: true:

 

See the Pen PojRZKp?editors=0010 by GreenSock (@GreenSock) on CodePen.

 

I also removed jQuery as a dependency - you can do all that in vanilla (jQuery wasn't really reducing your code or anything).

 

Does that help? 

 

Also, it generally doesn't matter how compressed your images are in terms of rendering. The browser has to decode the images anyway, so the only difference it'd make is loading time. In other words, a 2MB image vs. a 200kb image with the same pixel dimensions will perform the same rendering-wise. 

[Fisher666]

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.   

[GreenSock]

Yep, that's totally a browser rendering thing. If you look at Dev Tools, you'll notice there are two BIG image decodes happening right when it freezes: 

 

It's the browser rasterizing the image at a bigger size (at least that's my best guess). It's a pretty huge image, so it's a lot of work. 

 

If you place another <img> with that same src in its raw state directly in your HTML, even if it's in a wrapper <div> that's only 1px tall/wide, it resolves the issue (at least in my browser): 

<div style="width:1px; height:1px; overflow: hidden; opacity: 0.01">
<img src="https://images.unsplash.com/photo-1631847654534-172594c2df98?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTYzMTk0Mjg0NA&ixlib=rb-1.2.1&q=85"></div>

You can't make it opacity: 0 or visibility: hidden or display: none because then the browser assumes it can skip the visual rendering for it completely. 

 

I hope that helps.

[Fisher666]

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