Jump to content
GreenSock

TEQQED

Create transition - from smaller image to fullscreen on new page

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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!

  • Like 5
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 3 weeks later...
  • 10 months later...
  • 1 month later...
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 :D

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×