GSAP with React/React-Router

[tingting4444]

Hi!

 

Looking for some pointers as to how I would achieve this animation in react with GSAP/React-Router/React-Transition Group.

 

Rather than killing a tween I'd like to have it still visible and clickable which would start the slide and expand animation. I've found this codepen helpful but I'm a little stuck on how to keep the other images visible. this animation is what I'm hoping to achieve with each click changing the endpoint.

 

Thanks!

[Carl]

Hi and welcome to the GreenSock forums,

 

I don't use React at all so I'm not sure how to help with this. We really try to keep our support focused on the GSAP API. In most cases I would recommend that you focus on the animation you want to achieve and then later on add the additional complexity of whatever framework you are integrating with.

 

Rather than killing a tween I'd like to have it still visible and clickable which would start the slide and expand animation.

 

Not sure what you are getting at here. Tweens aren't visible or clickable, I'm guessing you are referring to the elements you are animating. Without knowing more I would suggest that you don't animate the opacity or change the visibility of the thing you want to move and click. GSAP does not hide things when tweens are killed.

 

I'm not really sure what type of advice you are looking for to help you get the demo you posted closer to the video you shared. 

 

Do you have a specific question related to GSAP? Is there another demo you can share that is closer to the result you are looking to achieve?

 

 

 

 

 

[Rodrigo]

Hi,

 

I'm actually trying to get a demo similar to the GIF you posted. In the mean time there are certain things that don't add up in your question, that in any case had to do with how the question is formulated, is just some React concepts in it that don't match the animation in the GIF file.

 

First, IMHO, I see no need to use either Transition Group or React Router for this demo. Keep in mind that router works with the url in the browser's address bar and a bunch of objects and methods in order to change the url based on user interaction and keep a history object to go back and forth just like regular navigation. Router normally mounts and unmounts a specific component as a result of the url change. I don't see that happening in the GIF.

 

Second, Transition Group is normally used for CSS animations (forbidden language in this lands ) and create animations in a declarative way that's very similar to the way you actually write a React app/component. When used with GSAP, transition group normally is good only for animations that result in the animated component being mounted before the animation starts (when you animate a component in) and unmounted after the animation is completed (when you animate a component out). This is an extremely simple example of using transition group with GSAP:

 

https://codesandbox.io/s/yvye9nnw

 

As you can see when the animation hasn't started the component is unmounted, you click the button and the component is mounted before being animated, then the in animation (to put a name to it) is completed. Then when you click the button again the out animation starts and when is completed, the component is unmounted.

 

I think this approach is far more simple and best suited for what you're trying to achieve, since the images are always present in the DOM so there's no need to mount/unmount them. It basically uses the ref callback to get access to the DOM node and then use that in a GSAP instance, at least that's the approach for the demo I'll create a little later:

 

See the Pen yKVJvP by rhernando (@rhernando) on CodePen

 

I hope that in the mean time, this helps to clarify some concepts and give you a better concept of how to work with GSAP and React.

 

Happy Tweening!!

[Rodrigo]

Hi,

 

This is the simplest and laziest possible solution for this. Is missing the click handler for the image cards, but the main idea is to show how to animate this in React using GSAP and to confirm what I said in the previous response that neither Transition Group or React Router are needed for that particular part of an app:

 

https://stackblitz.com/edit/gsap-forums-react-wyz64a?file=index.js

 

Here's a full screen view which is better than the smaller split in the editor view:

 

https://gsap-forums-react-wyz64a.stackblitz.io/

 

Now keep in mind that I'm using flex in order to reduce the complexity of the code (again, simple and lazy). But this could be done using elements with an absolute position, bottom and right values of 0, run a loop for the initial positions and use some similar logic to advance the elements. Also I didn't include the handler if the user clicks on an image card, but that's basically playing with the index of the element being clicked (that's why every element has a data-target attribute with the index position of it).

 

Hopefully this helps to clarify how to achieve this.

 

Happy Tweening!!!

[tingting4444]

@Rodrigo This was really helpful thank you! 

 

Sorry for the initial question, I was a bit overwhelmed with everything I want to achieve. Essentially my goal is to create something like the cards codepen you made as a demo. My reason for using react-router is that I actually wanted each image to update the url as in I would load an initial page at the endpoint /cards  as an example. Then as I'm going through the array I was looking at each card having it's own separate endpoint like /cards/1 and /cards/2 . I realize now that this might be more of a react-router question. 

[Rodrigo]

You're welcome.

 

Keep in mind that using React Router will show only one image at the time unless you  mimic this code:

 

https://reacttraining.com/react-router/web/example/modal-gallery

 

At that point you'll have to update all the images positions and start mounting and unmounting components before starting the animation and it could get a little messy. My advice would be to create the gallery similar to the demo I made and wrap that in a <Route> tag, like that you'll be able to check the location object from the API and update the image based on that. That will also allow users to bookmark the URL of a specific image.

 

Happy Tweening!!

[tingting4444]

@Rodrigo Yes, I guess that was my initial confusing question in that I realized that with react-router I would have to be managing the mounting and unmounting of each image and I didn't know how to put all of it together. I haven't used the location object from the API before so I think that will definitely be helpful. Thanks again!