Jump to content
Search Community

GSAP 3 - Working with timelines between components

ekfuhrmann test
Moderator Tag

Recommended Posts

Congratulations on the release of GSAP 3! The work you lot do both with your framework and with the support for it is just incredible, and I personally can't express how thankful I am to have this resource!

 

https://codesandbox.io/s/friendly-ellis-yi33q?fontsize=14

 

So what I'm trying to do is to run an animation across a few components. In this example specifically, I'm trying to have a button that animates and opens a modal, which then animates the content of the modal. I got it all to open relatively well, but what I'm not able to figure out is how best to go about reversing the animation, and more specifically the `ModalContent.js` animation. What I want to have happen is for it to reverse the content, then transition the modal itself.

 

I'm certain that the issues all lie in the way in which I set this up, so any suggestions on structuring this better (while still preserving the capabilities of animating across multiple components), I'm all ears.

 

Also, am I correct in using refs for targeting the elements? Is there any type of drawback to having a fair amount of refs for animating?

 

Thanks!

Edited by ekfuhrmann
Looks like the code sandbox link didn't work in the Codepen URL input.
Link to comment
Share on other sites

Hey ekfuhrmann,

 

I'm not very good with React. I'm guessing @Rodrigo, our resident React expert, may drop by. But in general it's good to use a "master" timeline when pairing animations, especially if you need to use control methods like .reverse() on them. I'm not sure how to set it up in React, but if you could create a timeline that is accessible by both components (maybe in your index.js?) and then add the sub-timelines (the modal and the modalContent) to that timeline then you could control the animations through that, including .reverse()ing it. 

Link to comment
Share on other sites

Hi, I was actually working on a sample, it took longer than expected due to some work stuff and the fact that I'm getting up-to-speed in the API of V3 (all my current projects are still on 2.x.

 

I believe that the best approach is to use forwardRef (https://reactjs.org/docs/forwarding-refs.html) in order to pass a reference of the modal content to it's parent element and include all in that particular timeline.

 

Here is a live sample:

 

https://codesandbox.io/s/gsap-react-modal-timeline-783bk

 

Happy Tweening!!!

  • Like 4
Link to comment
Share on other sites

Oh Man, I'm not familiar with forwardRef but at the onset of clicking through your example, this seems to be exactly what I'm looking for.

 

I'm going to spend some time reading up on forwardRef and making sense of how you set everything up. Thanks for the help!

 

EDIT: Quick question @Rodrigo, I see that you make a variable for your refs, such as let modalVeil = null;, is this a better way of handling refs as opposed to createRef or is it more just a preference type of thing? 

Link to comment
Share on other sites

Forward Ref can be a little confusing if you're relatively new to React, but is quite simple actually. In the same way that in my sample I send the close method from the parent to the modal component, the modal component creates a ref of the content <ModalContent ref={e => (modalContent = e)} />, the thing is that the value of modalContent is going to be a react object and not a DOM element. Basically forwardRef is a higher order function that takes a functional component and takes the ref passed as a prop in ModalContent and looks where exactly in the JSX code of that component you're using that reference and returns the DOM node to the parent, just like the close method works in this: <Modal visible={isModalVisible} close={closeModal} />, the only difference is that in the case of forwardRef that is executed when the component is mounted and not on a specific event handler, like a button. This is just the way I see and understand how this works, perhaps the official explanation could be different.

 

1 hour ago, ekfuhrmann said:

I see that you make a variable for your refs, such as let modalVeil = null;, is this a better way of handling refs as opposed to createRef or is it more just a preference type of thing? 

Just personal preference, the code is easier to read for me like that ;)

 

Happy Tweening!!!

  • Like 7
Link to comment
Share on other sites

Awesome, one last question for you. Have you figured out any good way of forwarding multiple refs to a child? In this demo we only needed the one, but I have a more complex animation that requires accessing a few additional child refs.

 

I came across this Stackoverflow regarding forwarding multiple refs, but the solutions weren't very sure of best way of handling them.

Link to comment
Share on other sites

To be completely honest I've never worked a lot with forwardRef and specially in such a case. Javascript-wise the solution in the SO post is quite correct and elegant. Keep in mind that you're just passing a reference (hence the name) to a specific object (DOM node). If that ref resides inside another object or an array, or a factory function or whatever you want, is just what JS allows you to do. If that approach works in your case then go ahead and use it.

 

If you want you could ask around in Reactiflux discord channel. There are quite a few very talented React guys there, including people that contribute to major React projects like React Transition Group, Styled Components, React Router, etc., so you can be sure that you'll find a very accurate and correct answer there. Just click the Join Reactiflux button.

 

Happy Tweening!!!

  • Like 5
Link to comment
Share on other sites

  • 3 months later...

If anyone is interested, I had to tweak this to allow for different children for the Modal. It's more usable that way. 

 

It also takes away the need for forwardRef unless I misunderstood the requirements.

 

https://codesandbox.io/s/gsap-react-modal-timeline-8mvym?fontsize=14&hidenavigation=1&theme=dark

Also, massive thanks for you guys for posting the first solution :)

  • Like 1
Link to comment
Share on other sites

  • 1 year later...

Thanks for the example, @TomSES! 

 

I'm wondering if there is a consensus on whether handling these cases as you did, similar to the approach shown in this sandbox (where it doesn't appear as though the focal element is unmounted upon disappearing - but only made invisible), or if it might be better to mount and unmount, and animate these two actions with... the help of React Transition Group, right?

 

I guess it's not that big of a deal when it's maybe just one element or something not at all computationally intensive. But I'm still trying to wrap my head around best practices in GSAP x React, coming from some of the more React-centric animation libraries like Framer Motion etc, where you would definitely opt to animate mounting and unmounting, not just hiding. 

 

And I'm not missing something very obvious, right? If you want to animate mounting and unmounting with GSAP in React you'd have to reach for React Transition Group?

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.
×
×
  • Create New...