Jump to content
Search Community

Gatsby React + GSAP Best Strategy/Practice

Steve Giorgi test
Moderator Tag

Recommended Posts

I have a few general questions -- each are things I've been running into and I'm just not sure how to best approach it.

 

I build my timelines within my individual components.  I sometimes have nested timelines in these components.  In just about every project I find myself needing to control all of those individual timelines from a master timeline.  What's best practice here?  Do I need to restructure how I'm thinking about my project and instead of building any of my timelines in the components, I should instead pass those individual tweens up or can I pass my individual timelines up?  Do I need to forget about that altogether and pass every single ref up from my children/grandchildren and build all of my tweens in one central component?  In each scenario I would be passing things up to layout.js or my page template depending on the complexity and needs of the project.

 

If I forward refs for a component or an array of refs for the individual pieces of my component to my parent, it becomes far too complex (we have several options to keep the complexity down a bit... such as passing an array of refs or we can pass one ref and crawl through the nodes -- not sure what best practice is here either).

 

 

One last one ----- is it crazy for me to be nesting timelines inside of timelines?  For instance, I will create several timelines for one section/scene as there is a lot happening and it really helps with starting things up in tandem without having to set the position for all of my individual scene elements (a lot less to track); I then place these timelines in yet another overall timeline for that section.  Ideally, that would then be placed in yet another master timeline.  For the complexity of some of my scenes it feels very intuitive.

Link to comment
Share on other sites

Hi Steve!

 

It's very hard to give best practices advice for animations because every situation is different. What might work well in one situation could cause problems in another situation. Sometimes it's just a little bit of trial and error figuring out the best strategy.

 

If you need everything to be controlled by a single timeline, then passing up refs or an animation to a parent is fine. The end result will be the same either way. 

 

2 hours ago, Steve Giorgi said:

One last one ----- is it crazy for me to be nesting timelines inside of timelines?  For instance, I will create several timelines for one section/scene as there is a lot happening and it really helps with starting things up in tandem without having to set the position for all of my individual scene elements (a lot less to track); I then place these timelines in yet another overall timeline for that section.  Ideally, that would then be placed in yet another master timeline.  For the complexity of some of my scenes it feels very intuitive.

 

Definitely not crazy! Timelines are designed to handle situations just like that. I can definitely say that this would fall under a best practice if it helps reduce the complexity of your animation code.

 

If you want to share some example code on codesandbox, I can take a look and possibly offer up some pointers.

 

Link to comment
Share on other sites

Hi Blake,

 

Thanks for the help!  Yes, it's even harder to figure out what best practices are especially in conjunction with a framework like React.  I'm able to execute what I want/need to do but it just feels like I'm slopping/hacking it together.  For instance, in one component I have over 20 refs so I've tried to switch to defining a ref and then pulling child elements from that but sometimes that ends up being even more convoluted.  Maybe Redux is the answer.

 

I will definitely take advantage of your offer, thank you!  I will put together a Codesandbox this weekend that highlights some of the issues I've been running into.

 

 

Link to comment
Share on other sites

1 hour ago, Steve Giorgi said:

Yes, it's even harder to figure out what best practices are especially in conjunction with a framework like React.  I'm able to execute what I want/need to do but it just feels like I'm slopping/hacking it together.

 

I know the feeling, and we're working on stuff to help making animating with React easier.

 

1 hour ago, Steve Giorgi said:

For instance, in one component I have over 20 refs so I've tried to switch to defining a ref and then pulling child elements from that but sometimes that ends up being even more convoluted.

 

The next release of gsap might have a little utility to help with situations like that. See the gsap.utils.selector in this demo. You really only need to make a ref for the root element of a component.

 

See the Pen d86f6dea741f0fe2139afce2c546fc43 by osublake (@osublake) on CodePen

 

 

1 hour ago, Steve Giorgi said:

Maybe Redux is the answer.

 

I don't know about using Redux. That might add a lot of complexity. The context API is probably a little easier to use.

 

  • Like 2
Link to comment
Share on other sites

Awesome, I figured with the amount of React/Vue related questions I'm seeing in the forums that even without the issue being GSAP related there is a need to make GSAP mesh better/easier with these Frameworks.

 

Thank you for providing the demo -- I'm utilizing styled components but I could setup classes on them.  It would be less cumbersome than what I'm doing now.  In many ways I've been regretting the switch to styled components.

  • Like 1
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...