Expand div on click to fullscreen

[jo85]

Hello dear GSAPers,

 

I saw an effect on this website that I would like to recreate. When clicking on one of the project teasers on the home page, it expands to full screen size no matter where the teaser was previously on the screen:

 

https://www.buildinamsterdam.com/cases

 

Is this possible with GSAP?

 

Thanks for your help and a good start to the new week....Johannes

[GreenSock]

Absolutely it's possible. There are many strategies, but you might want to take a look at Flip plugin. 

 

Good luck!

[The Old Designer]

Hi, Just a question on using Flip for this, I have user cases where this could be really useful but...

 

What's the effect on page load/size if you need to add quite a bi of "stuff" to the flipped to state? I am thinking of a couple of images, divs and texts for each element targeted as per the example above. Is this an intended/viable use or are page transitions or even the new view transitions testing in Google Canary / single page applications a better bet? Obviously I would love to use Flip but wondered if you had a clarification or advice please

[Cassie]

Heya!

 

Are you asking for info on animated page transitions on non SPA sites?

 

view transitions aren't going to be stable and cross browser for a good while yet, so I wouldn't say that's a viable alternative. Flip specifically won't struggle with animating a bunch of things, not any more than normal GSAP tweens. If you're talking page transitions, you'd need some sort of way to keep the state between the pages.

Maybe something like taxi? https://taxi.js.org/

 

Flip is nice an easy with SPA's because you have routing and state.

 

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

I'm not sure how much advice I can give without seeing a demo or having more info though sorry, 'quite a bit' and 'stuff' is a little vague, it's also not super clear if you're needing page transitions or just wanting to animate elements in a kinda faux page transitiony way... Lots of different routes here (pun not intended)

e.g. looks kinda like a page transition but isn't.

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

[The Old Designer]

Hi Cassie thanks for the response, sorry if I was unclear.

 

The example I was thinking of, basically the same as the gallery example above but each image (maybe 20-30) animating to a state where there are more related images, and formatted text, pretty much like an agency portfolio/case study idea.

 

Yes using Flip as I understand view transitions are a way off, have no desire to use SPA's or a library like Baba unless I have to,  and anyway I prefer GreenSock 😉

[Cassie]

No worries at all on the unclear bit, there's so many different uses for flip, it's hard to be clear!

 

Thisa may be of use - https://greensock.com/docs/v3/Plugins/Flip/static.batch()

 

But the only way to check really is to do a little test and see.

Here's an example with loads of different elements flipping. I'm sure you'll be fine, as long as you're doing all the state grabbing at the same time.

See the Pen dyVvWRy by georgedoescode (@georgedoescode) on CodePen