React support

[m.rasekh]

Will there be component level support for React anytime? Or maybe an official documentation. It's quite a pain to do even simple enter/leave dom animations.

I switched to Pose and now I miss GSAP.

[Rodrigo]

Hi and welcome to the GreenSock forums.

 

First I love the avatar!!!!

 

Second, yep there's a lack of documentation for GSAP + React / React Native out there. Unfortunately tools like Pose and Transition Group help only with simple tasks, when the time comes to make complex animations things get a bit complicated.

 

There is (actually was) a tool for that (https://github.com/azazdeaz/react-gsap-enhancer) but is no longer maintained so not much to do there. Also in this scenarios we run into React's declarative nature, which is quite unique and the fact that the React team doesn't help too much in getting access to the DOM elements. In fact I've read some comments and Tweets from Dan Abramov (creator of Redux and part of the React and React Create App teams), where He declares that accessing the DOM nodes should be a no-no and that is anti-pattern. Obviously Dan hasn't done a single complex animation in His life on a React app ;).

 

Back to the issue the most robust tool I use (and that's just one guy's opinion) is React Transition Group (RTG), because it takes care of the DOM operations and reconciliation when the components get mounted, unmounted, updated, etc., so with it we can take care of only creating our GSAP code. The caveat (there's always one of those, right?) is to create the transition component to use GSAP in it, but once you get the hang of it you'll see is not too complicated because RTG's API is quite simple.

 

Here are some samples using GASP with RTG:

 

Simple list of elements

(this has some commented out code, that's the code to use... [sigh] CSS Transitions, but the sample actually uses GSAP)
https://codesandbox.io/s/7lp1q8wba

 

Mount / UnMount a component

https://codesandbox.io/s/yvye9nnw

 

Draggable Rotation

https://codesandbox.io/s/jrkbkxeqy

 

Now the first two need a major update because they're using React 15.x, when you could still use string refs for the dom elements. Now a days you need a different approach for it, like this:
 

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

 

But updating it shouldn't be too complex.

 

If you still find some issues on the road, please don't hesitate to create a codepen or sandbox to get a look at it. The idea is to encourage people to keep using GSAP and spread it as the standard for web animations.

 

Happy Tweening!!!

[OSUblake]

On 6/14/2018 at 10:53 AM, Rodrigo said:

React's declarative nature, which is quite unique and the fact that the React team doesn't help too much in getting access to the DOM elements. In fact I've read some comments and Tweets from Dan Abramov (creator of Redux and part of the React and React Create App teams), where He declares that accessing the DOM nodes should be a no-no and that is anti-pattern. Obviously Dan hasn't done a single complex animation in His life on a React app ;).

 

I played around with React and Redux once... ?

 

Too many rules and constraints, and I like touching the DOM, so I set out to find something better. That's when I came across some nice VDOM alternatives,  lit-html and hyperHTML. They're faster, more efficient, and accessing DOM nodes is perfectly ok. It's definitely worth checking out.

 

Here's your simple list of elements demo using lit-html. Codepen doesn't have syntax highlighting, but there are plugins for that on VS Code.

 

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