Flip css of single image - ie make thumbnail full page on click, and back down on click again

[newguy123]

Hi

 

This example ALMOST shows what I'm asking, however it seems to use 2 different sized images. Can I adjust it so it uses the same image and just flip between a css scaled down version and a css fullscreen version?

 

 

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

[mvaneijgen]

Sure, what have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools. Sharing someone else their demo is not really help full, you only learn if you dive in to the code your self!

 

Check out the Flip plugin docs, everything you ever want to know gets explained there https://gsap.com/docs/v3/Plugins/Flip/ the video is especially helpful 

 

Flip works by recording two states, the initial and the final. Just give the element a class and give that class and change the properties of that element with the new class and in the Flip.getState() capture all the properties you want to animate. Or you could change the elements parent, see (and this all gets explained in the docs in detail. 

 

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

 

 

Here is the example you've shared, but change to just use the thumbnail with a scale. Please include your own pen next time with the changes you've already tried your self. 

 

See the Pen dyaqVjX?editors=1111 by mvaneijgen (@mvaneijgen) on CodePen

[newguy123]

Thank you, and apologies for not posting my own pen originally.

Here's a forked version with some modifications I made. Any idea WHY scrollbars appear on the zoomed version, or is it just a editor bug from the pen ide? There also appear to be a slight jump/glitch type of thing going on just towards the end of each transition.

See the Pen BaMOmWG by newguy123 (@newguy123) on CodePen

[mvaneijgen]

The scrollbars probably show because the scaled up image is larger than the screen and will cause scrollbars? I don't see any jump/glitch, you could try setting absolute: true, on the flip animation.

[newguy123]

5 minutes ago, mvaneijgen said:

The scrollbars probably show because the scaled up image is larger than the screen and will cause scrollbars? I don't see any jump/glitch, you could try setting absolute: true, on the flip animation.

thanks. This works in my simple pen, but in actual project it totally messes up the rest of the layout
I have my tumbnail sized image several divs deep in my site, but the zoomed one I want full screen as per the pen, over everything else

is that where things would come in where you actually need to do this kind of thing with 2 differnt images?

[mvaneijgen]

I have no idea, all we can debug is the current pen you've provided. If there is some issue try recreating the issue in codepen and tell us what "messed up" means. Please don't include your whole project, just enough so we can see the issue you're having. 

 

You can also just hardcode the the class on the element you're animating to see what it looks like without Flip and then fix the issue you're having with just normal CSS and then enable flip again to see if that fixed the issue.  

[newguy123]

11 minutes ago, mvaneijgen said:

You can also just hardcode the the class on the element you're animating to see what it looks like without Flip and then fix the issue you're having with just normal CSS and then enable flip again to see if that fixed the issue.  

Yes this is what I did with zoomed version, and it makes sense that the zoomed version would mess up the rest of the layout as its 20 times bigger.
I geuss I just thought it somehow hides the visibility of the smaller one so the layout doesnt get affected, and then just stick the big one over over it.

I'll go through the video in the flip docs and see if anything pops out from there, failing that I'll do as you say and strip down my project to try and demonstrate the issue better

[Rodrigo]

Hi,

 

Maybe these demos can provide a good starting point:

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

 

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

 

Happy Tweening!

[newguy123]

actually correction, I initially only tried the css of the the larger image, and THAT messed up the layout

 

now that I added the Flip code, things ALMOST work. HOwver on the bit where I'm trying to get the image to go fullscreen, it STAYS INSIDE its own container. The layout and everything else works as expected, just the image DOES not go fullscreen, but more, it goes full current container

How can I get it to break OUT of its current container and fill the screen?

[mvaneijgen]

That is what the original demo you've posted is doing. It does this with two different images, but that is just an example you could totally use the same image. But most people want to optimise their sites, so that no wasted KB gets loaded if not necessary, so they have a small image which loads fast and a big one that loads slower, but is hidden so that doesn't matter. 

 

[newguy123]

Try as I might, I just CAN'T seem to get the zoomed image free from its container on the right here. When it zooms, I want that image to be full viewport height, and positioned center/middle of the viewport. Kindly help me out

See the Pen yLZRNQQ by newguy123 (@newguy123) on CodePen

[mvaneijgen]

Orignal demo, just change the second image to be the same as the first image

 

See the Pen LYqgpzy by mvaneijgen (@mvaneijgen) on CodePen

[newguy123]

3 minutes ago, mvaneijgen said:

Orignal demo, just change the second image to be the same as the first image

 

 

 

yes in that simple demo with 1 div it works
point is in my project with several div levels deep, it doesnt work
if you notice, the JS is exact same
the css is pretty close
but the html is totally different as I have many divs inside divs. The actual project have other things in there also, but I stripped it out to show the issue here

[newguy123]

here's the exact css and js from the original, but it doesnt work as expected

See the Pen poGxjLz by newguy123 (@newguy123) on CodePen

[mvaneijgen]

Why is it all the way in there? To me it seems everything is working as expected, but because it is nested in there you have to apply some extra CSS to make it how you want it to look. Or even beter just move it. You're the developer, so develop it that best suits your use case. 

 

Flip is doing what it suppose to, so there is no GSAP issue here. Your issue is CSS and HTML and we just don't have the resources to provide free general consulting or logic troubleshooting on these free forums. You're welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Hope it helps and happy tweening! 

[newguy123]

Another option, but it gets even weirder and still not doing what I expect. Now the thumbnail moves down,and the fullres version just appears. Weird stuff

 

See the Pen XWOxbWB by newguy123 (@newguy123) on CodePen

[GreenSock]

You were missing a "." in your selector text. 

// bad
Flip.getState(".articleImage1, articleImage1Full");

// good
Flip.getState(".articleImage1, .articleImage1Full");

(so you weren't capturing the state properly)

 

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

[newguy123]

11 hours ago, GreenSock said:

You were missing a "." in your selector text. 

(so you weren't capturing the state properly)

 

Well spotted, thanks Jack!

 

Now I converted that to a react project. What do you think could be the cause of the image zooming perfectly fine on click, but then the zoomed version just sits there and doesnt go back down to thumbnail on click again?

 

Looking forward to some more useGSAP() examples when that is announced. Hopefully there will be some examples in there that could give people like me some hints.

[Rodrigo]

9 hours ago, newguy123 said:

Now I converted that to a react project. What do you think could be the cause of the image zooming perfectly fine on click, but then the zoomed version just sits there and doesnt go back down to thumbnail on click again?

Please create a minimal demo in Stackblitz so we can have a look. This could be a mount/unmount issue (the element could be removed from the or something else.

 

Here is a simple React demo using useGSAP:

https://stackblitz.com/edit/vitejs-vite-gdudgh

 

Hopefully this helps.

Happy Tweening!