Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Rick May

Thoughts on how to do this with React/GSAP

Recommended Posts

I'm very new to using React (I'm using Gatsby) and still wrapping my head around how best to handle various situations.  I thought I had a methodology all worked out for this particular website, but I'm starting to question whether I'm taking the right approach.  I hope an expert can offer an opinion or two.

 

This (it isn't for a client, but for my own educational purposes) website is a single page with several full screen sections.  Each section is a separate component, and inside each of these components, I have a GSAP draggable.  Click and drag to navigate to the next section.  All of this is working for the most part.

 

As I get further along, I'm starting to question whether this is the best approach.  Each of those draggables (contained in its own "section" component) need to communicate values to each other.  Since I'm new to React, I'm still figuring out how to best share values between the child components.  

 

So...

 

I started wondering if it would be better to have all of the separate draggables created in the index.jsx (parent) instead of the components.  This way, it would probably be easier to share info across the draggables.  I would only need to communicate minimal (i.e. drag has ended, begin a timeline that lives inside the component) information to the components.    

 

 

I guess my question is.  If you were to work on a project like this, would you be more likely to create the draggables in the parent, or in the child components?  Or, is there a completely different approach you would take?  Doing this with a "normal" non-React website is pretty straight forward.  But, I'm struggling a bit as I learn the React way.  I'm not look for a solution, but more of a "I would take this approach because..."

 

Thank you,

Rick

 

p.s. I hope this is appropriate for this forum.  I thought because there are so many smart GSAP'ers here, it was worth a shot.

 

 

Link to comment
Share on other sites

1 hour ago, Rick May said:

I guess my question is.  If you were to work on a project like this, would you be more likely to create the draggables in the parent, or in the child components? 

 

It's hard to say without seeing what what you're doing. Can you make a simplified demo on codesandbox or stackblitz?

 

1 hour ago, Rick May said:

Each of those draggables (contained in its own "section" component) need to communicate values to each other.  Since I'm new to React, I'm still figuring out how to best share values between the child components.  

 

For simple stuff, a mediator component can manage that. Have you looked at this calculator? On input, the value gets passed up to the parent component, which sends the calculated values back down as a property.

https://reactjs.org/docs/lifting-state-up.html#lifting-state-up

  • Like 4
Link to comment
Share on other sites

I'll try to set some time apart today for a demo to make it a bit more clear.  

 

Thanks for the link.  I will check it out.  

Link to comment
Share on other sites

2 hours ago, OSUblake said:

It's hard to say without seeing what what you're doing. Can you make a simplified demo on codesandbox or stackblitz?

 

Here is a reduced demo... 

 

https://codesandbox.io/s/zkvk1jy91x

 

Main things I'm looking to do.

 

1) When a throw completes (albeit no throwing in the demo) on opening.jsx, I'd like to be able to notify closing.jsx so that it can then play a timeline.   

2) I'd like to be able to freely pass values back (for instance, the y position of the opening draggable) and forth between children.

 

From my limited experience with React, I'm under the impression that I cannot directly pass stuff between children components.  But must go from the child to the parent and then onto another child.  So, I'm wondering if I'm better off creating the draggable objects in the index.js.   If one of the draggable needs to notify either opening.jsx or closing.jsx components, it would eliminate one of the steps.  However, I do like having the draggable in each child component so that it is all neatly kept together.

 

Thank you,

Rick

 

 

  • Like 1
Link to comment
Share on other sites

1 hour ago, Rick May said:

From my limited experience with React, I'm under the impression that I cannot directly pass stuff between children components.  But must go from the child to the parent and then onto another child.  So, I'm wondering if I'm better off creating the draggable objects in the index.js.   If one of the draggable needs to notify either opening.jsx or closing.jsx components, it would eliminate one of the steps.  However, I do like having the draggable in each child component so that it is all neatly kept together.

 

There's a bunch of different ways to pass stuff between siblings. I guess it matters what you mean by "stuff", as in is this stuff something that should be kept in sync with your app's state? Maybe @Rodrigo can chime in and offer some advice since he's the resident React expert around here.

 

For something fast and simple, you can't go wrong with an event emitter. I added EventEmitter3 along with the

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

to your demo. When a throw ends, that component fires off an event along with its end y position. The other component will do a short animation, and log out the end y position. You could have your listeners setState if needed.

 

https://codesandbox.io/s/x9y5m6qvyo

 

 

 

 

  • Like 5
  • Thanks 1
Link to comment
Share on other sites

21 minutes ago, OSUblake said:

 

For something fast and simple, you can't go wrong with an event emitter. I added EventEmitter3 along with the

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

to your demo.

 

 

Woah.  Way cool.  Thanks so much for making me aware of EventEmitter and for taking the time to show me how.  :D

 

I love React for several reasons, but it can be really confusing for me at times to do some pretty (seemingly) simple things.  I'm hoping I'll adapt sooner than later.

 

Thanks again!

 

 

  • Like 2
Link to comment
Share on other sites

Hi Rick,


Well, actually passing anything between sibling components or up the chain in React and Vue is a bit complex actually, that's why you can rely on Redux, MobX and VueX. If you're starting with React, I think that @OSUblake's approach is the best. Is simple and works in the way you expect.

 

Right now my recommendation would be to get more familiar and comfortable with React and then move onto using Redux for more complex tasks and when your apps need to observe changes in the app's state. In that case you could use redux observable, but as I mentioned, it would be better to start with the basics of redux and then move into more advanced stuff.

 

You can watch this free course by Dan Abramov (creator of Redux and part of the React team) about getting started with React and Redux:

 

https://egghead.io/courses/getting-started-with-redux

 

Also this article by Lin Clark is very good as well:

 

https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

 

Happy Tweening!!!

  • Like 6
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.
×