Help with Expanding Text Background Image Transition Using GSAP and React Router

[N3O]

Hello GSAP community,

I'm working on a React project where I'm attempting to create a smooth page transition with GSAP and React Router. The specific effect I aim to achieve is this: when a user clicks on a button (which is text with a background image), I'd like the image within the text to grow and eventually become the background image of the new route.

 

Here's the scenario in detail:
- I have a list of clickable project cards on the homepage, each with text over a background image.
- when clicking one of these text elements, I would like the background image to expand, filling the entire screen and then transitioning into the background of the next page 

 

So far, I have tried animating the scale of the element . However, I am running into two main issues:
1. The `scale` property does not seem to be the correct approach for making the image become the background smoothly.
2. The transition to the other route comes off as abrupt and I'm struggling to integrate the animation seamlessly into the page change.

 

I would greatly appreciate any advice on how to create a seamless transition where the clipped background image expands to fill the screen and serves as a connector between the two routes. 

 

 

 

Here's a link to a current sample of the project on CodeSandbox:  Codesandbox Exemple

[mvaneijgen]

Have you seen the flip plugin? https://gsap.com/docs/v3/Plugins/Flip/ seems like the perfect use case for this.

 

I don't know how to do router manipulations in React, but if I where to do it in Vue.js I would just create a component that stays mounted throughout the whole app and that is where the full size images live and I would then use something like this demo from the docs to seamlessly flip the images between sizes. 

 

Hope it helps and happy tweening! 

 

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

[Rodrigo]

Hi

 

I'm on my phone now so I can't look at the demo you posted.

 

Ever since the Flip Plugin came out I've been dying to tackle something like this. Still haven't found the time to do it though

 

What I can tell you that this is in no way a simple endeavour. There are far too many moving parts in this that have to work in perfect sync in order to have a seamless smooth UX.

 

I do think that Mitchel's idea is great, you can have an element just for the image on the main router file or an element for he entire content if you want. You can create a JSON file for each route and fetch the corresponding one based on the target route. You'll need some share state, most likely using react context and perhaps handle your app's routing programmatically. In that case your view(s) for the target routes of the images could be empty components since the contents will be added dynamically using the target route.

 

This is just one way to handle this, I'm 100% sure that there are other ways to tackle this, but based on Mitchel's idea this was the first that came into my mind. Unfortunately this is not a simple and short task and we don't have the time resources to create such complex apps for our users in these free forums.

 

Hopefully the ideas get you on the right direction and provide some help.

Happy Tweening!

[N3O]

@mvaneijgen @Rodrigo Thank you both for your insights, I really appreciate you taking the time to share your ideas !

 

The FLIP plugin does look like it could be a handy tool for the animation transition I have in mind. Also, the idea of using a persistent component is quite intriguing, although I'm still a bit on the fence about it, anyway I’m going to dig deeper into the documentation and see how I can tailor this strategy to fit my setup.

 

Looking forward to get these animations just right - Thanks a bunch!

 

 

[N3O]

Hey everyone!

 

Just wanted to drop an update on the thread. Thanks to @GSAP Helper awesome tip about using `gsap.context()` in a React setting, I've managed to completely solve the transition animation I was facing!

 

After implementing the context call as instructed, the animations are now smooth as silk. Plus, the cleanup approach mentioned has been a game-changer for the overall flow. No more awkwardness!

 

Here's a link on CodeSandbox : Flip transition with react js and react-router-dom

 

thanks for the help and for the resources provided. Keep on tweening all!

Cheers!