Create transition - from smaller image to fullscreen on new page

[TEQQED]

Hi guys!

I'm wondering if you could point me in the right direction. Ideally I'd like to have a portfolio similar to https://antoni.de/cases/ and https://www.ultranoir.com/ where users can browse through projects and on click a page transition takes place where the featured images expands and open the single case page.

I have been scouring these forums but can't find anything similar.

Thanks!

See the Pen by cases (@cases) on CodePen

[smallio]

We must be both working on a very similar site judging from your last post & now this one haha. Anyway, It's a complex topic often using barba.js & other libraries to do AJAX transitions for fluidity. I'm working on a project tiles to project page transition for a personal project using barba & gsap. I'm happy to inbox you that when I'm done & see what you can extract from it.  

 

That being said... I've learned a lot from the following sources:

 

To start you off getBoundingClientRect is your friend & helps if you want to do something like this (half page transition).

 

See the Pen VVdoNj by mikeK (@mikeK) on CodePen

 

This next example is probably what you need (not using gsap though). You can easily convert over & use timelines etc with it.

 

See the Pen PWxoLN by rachsmith (@rachsmith) on CodePen

 

Here is one using Vue & GSAP together 

 

See the Pen ALgZpp by timrijkse (@timrijkse) on CodePen

 

Here is React & GSAP

 

See the Pen gWWQgb by sdras (@sdras) on CodePen

 

And finally, this one is mostly css but I've included it anyway incase you want to learn from it.

 

See the Pen wYRmGB by Oz-10 (@Oz-10) on CodePen

 

Hope that all helps!

[TEQQED]

@smallio Lol yes, thanks so much! And I would really appreciate it. This is for our own website which we're doing the rebranding and redesign for. And we're checking out animations we'd like to incorporate.

Let me see if I can figure out how to share my details.

[TEQQED]

@smallio how is it going for you? Made any progress?

[fidoogle]

Hi. I just starting learning GSAP and I put this together with React. Perhaps it can help you. 

 

https://codesandbox.io/embed/icy-field-fzujd

[Ozzy]

On 3/5/2019 at 2:37 AM, smallio said:

We must be both working on a very similar site judging from your last post & now this one haha. Anyway, It's a complex topic often using barba.js & other libraries to do AJAX transitions for fluidity. I'm working on a project tiles to project page transition for a personal project using barba & gsap. I'm happy to inbox you that when I'm done & see what you can extract from it.  

 

That being said... I've learned a lot from the following sources:

 

To start you off getBoundingClientRect is your friend & helps if you want to do something like this (half page transition)

 

This next example is probably what you need (not using gsap though). You can easily convert over & use timelines etc with it.

 

Here is one using Vue & GSAP together 

 

Here is React & GSAP

 

And finally, this one is mostly css but I've included it anyway incase you want to learn from it.

 

Hope that all helps!

Did you manage to recreate something like this and can you share a link so we can check it out

[TEQQED]

Yes, but it's not published yet I hope soon, finally..