Any plans for dedicated GSAP React library

[venn]

Hi there,

 

This questions may have been asked. I'm also aware of https://greensock.com/react/

But I'm wondering if GSAP is going to invest in creating a React library from the ground up?

 

I'm asking this because:

1) Big fan boy of GSAP. Love the power and elegant of it! Most importantly super friendly and helpful folks. I used to use GSAP a lot when I'm in the digital/advertising agencies.

2) Unfortunately, now I work in a product world (Atlassian) where the company is big on React tech stack.

 

Cheers,

Venn.

[ZachSaucier]

Hey venn, thanks for being a Shockingly Green member!

 

What do you mean exactly when you say "React library"? GSAP works great with React. Are there particular pain points or features that you're looking to get?

[Rodrigo]

Hey Venn, you mean something declarative like React Transition Group but with GSAP?

 

Like this:

<GSAP /* Tween Config Here */>
  <MyComponent />
</GSAP>

The main challenge I see in this is what happens when someone wants to integrate this with a re-usable component or another stuff like styled components where you don't have direct access to the DOM node. Keep in mind that GSAP requires the DOM node to work it's magic. Another option could be create a proxy object and pass rendering props to components in order to update the styles, but doing so through React's render() method could slow things quite noticeable in complex scenarios.

I agree with Zach in terms of perhaps you have some ideas or particular issues that apply to your day-to-day work. If that is the case and we're talking about situations related to Altassian's specific components or apps structures, perhaps the best course should be for you guys to whip your own particular solution.

 

It would be great to know what you guys are dealing with and what have in mind would be useful to solve it.

 

Happy Tweening!!!

[OSUblake]

3 hours ago, Rodrigo said:

Hey Venn, you mean something declarative like React Transition Group but with GSAP?

 

Like this:

<GSAP /* Tween Config Here */>
  <MyComponent />
</GSAP>

 

react-gsap does that, although it looks like it hasn't been updated in awhile.

https://github.com/bitworking/react-gsap

 

import React from 'react';
import { Tween, Timeline } from 'react-gsap';

const TweenComponent = () => (
  <Tween from={{ x: '100px', rotation: -360 }}>
    <div>This element gets tweened</div>
  </Tween>
);

const TimelineComponent = () => (
  <Timeline
    target={
      <div>Target element which will be visible and gets tweened</div>
    }
  >
    <Tween from={{ opacity: 0 }} to={{ opacity: 1 }} />
    <Tween to={{ x: '50px' }} />
  </Timeline>
);

 

Demos:

https://bitworking.github.io/react-gsap/

 

[venn]

Thanks team. Sorry should have been clearer. What I meant was a declarative approach in using GASP with React. I'm also aware of react-gsap but I'm wondering if there's any official support from GSAP?

 

I'm a designer and I use it a lot when it comes to UI prototyping in React. The thing being as a designer you don't get the luxury to do coding on a daily basis and I'm surrounded by all these React developers it's just easier to seek help immediately if it's in React. But that's just my use case too ? might not be common.

 

However these days I've been using Framer X motion more but still deeply miss the power and ease of use from GSAP. 

[venn]

Also further to add on this. Engineers in my company earlier on have been activity seeking out for any motion libraries we could use. The options were around React-spring, React-transition-group, Framer motion, CSS...

 

Not sure if there's any roadmap plan for GSAP to consider this.

[Rodrigo]

Hey Venn,

 

As far as I know there is no official plan from GreenSock to create something like that. Consider the fact that because of React's nature this wouldn't actually be a GSAP Plugin that takes a React element and tweens one or more specific properties of that object (the main way GSAP actually works), but a React component that uses GSAP to create an GSAP instance using the reference to the children passed to it as the target. This is most definitely a React tool and not a typical GSAP Plugin/Tool.

 

It seems that the project Blake posted is getting things done. The trick is returning a <Fragment></Fragment> wrapping the children pass to the wrapper and then clone them in order to obtain the refs in order to pass the DOM nodes to GSAP:

 

https://github.com/bitworking/react-gsap/blob/master/src/Tween.js#L151-L176

 

https://github.com/bitworking/react-gsap/blob/master/src/helper.js#L141-L152

 

The rest of the code is basically a way to control the GSAP instance that is being created by detecting updates in the props passed to it. It even seems to work with styled components.

 

Honestly I have never used it because I consider it an extra layer that, I haven't considered necessary in any project I've worked on. As much as I can advocate towards the declarative nature of the package, under the hood is doing pretty much what every GSAP+React sample does. Gets a ref and passes it to a GSAP instance.

 

If I was you I would ask the engineers over there to create a fork of that project and whip your own solution that adjusts to your needs. You should also point the fact that version 3 of GSAP is coming soon so perhaps they might want to study migrating to that API instead of the 2.x API.

 

Happy Tweening!!!