martis

React and GSAP

  • 39 posts in this topic

39 posts in this topic

Hello everyone,

 

I am about to dive into React JS and wanted to see if people were using GSAP with React JS? I searched the forums but did not find much. I found a gsap react plugin, but wanted to poll the forum.

 

Thanks!

Share this post


Link to post
Share on other sites

I know people are doing it, but there aren't too many React related questions posted on this forum. I've been wanting test it out, but haven't made the plunge yet. If I was going to start learning it, I would probably start with the react plugin you mentioned, just to learn how GSAP works with the virtual DOM.

  • 2 people like this

Share this post


Link to post
Share on other sites

Just started working with React and will also be using GSAP (of course).  I found this link helpful: https://egghead.io/lessons/react-using-tweenmax-with-react which unfortunately uses the deprecated getDOMNode in its examples.  Simply swap out for findDOMNode and start animating.  My project is working fine with simpler sequential animations so far, but simultaneous transformations on a single element may be trickier.  I haven't tried the plugin, I'm just loading TweenMax straight, though I may change things up if I run into trouble.  So far, so good, though.

  • 7 people like this

Share this post


Link to post
Share on other sites

Hi,

i made this tool to be able using React and GSAP together
[Github](https://github.com/azazdeaz/react-gsap-enhancer)
[Demos](http://azazdeaz.github.io/react-gsap-enhancer/#/demo/update-and-animate-transform)
Please issue me know if you have an idea to make this better! (Or made something cool with it :simple_smile: )

The problem is React suspect that nothing else mutates the DOM of the components. So if you mutate it React will respond with tons of errors. This fix this problem by removing all the extra mutations before the React render() than restarts the animations.  

  • 4 people like this

Share this post


Link to post
Share on other sites

Hi,

i made this tool to be able using React and GSAP together

[Github](https://github.com/azazdeaz/react-gsap-enhancer)

[Demos](http://azazdeaz.github.io/react-gsap-enhancer/#/demo/update-and-animate-transform)

Please issue me know if you have an idea to make this better! (Or made something cool with it :simple_smile: )

 

The problem is React suspect that nothing else mutates the DOM of the components. So if you mutate it React will respond with tons of errors. This fix this problem by removing all the extra mutations before the React render() than restarts the animations.  

 

azazdeaz; I literally love you right now.  This is an amazing piece of work.

  • 1 person likes this

Share this post


Link to post
Share on other sites

Thanks @danielsdesk! I'm looking forward to see if you create something cool with it!

  • 1 person likes this

Share this post


Link to post
Share on other sites

Thanks @danielsdesk! I'm looking forward to see if you create something cool with it!

 

I'm messing with it as we speak... I have lots of React experience but I only just starting getting into GSAP the past week or so to try and do some really complicated js animation stuff for the first time... I may have some really stupid questions to ask

Share this post


Link to post
Share on other sites

@danielsdesk if you have any question about react-gsap-enhancer i waiting for them on gitter or in the github issues. There is also a lot of great people on this forum answering anything about GSAP. 

  • 1 person likes this

Share this post


Link to post
Share on other sites

This looks good. Throws an error on React .014 though. getDomNode being deprecated.

Share this post


Link to post
Share on other sites

Really this is cool and i am also very happy to join with all of you.

Share this post


Link to post
Share on other sites

Hi Praney!

 

I think, pactically, if you don't want to update the same styles or other attributes that GSAP does, remove animations and they effects from the  component, or select components by they props, you're good to go with that approach.

Share this post


Link to post
Share on other sites

Hi, @azazdeaz.

 

I am starting now with ReactJS and I am used to GSAP for a long time ago. I was trying to import your react-gsap-enhacer into my application but with no success. Because I am using requirejs and ES5 to this project. Is it possible to make a ES5 "bundle" version? I mean, a single file that I could "require()" and use it across my app? Or could you give some basic instructions, so I can try make this bundle by myself?

 

Thank you.

Share this post


Link to post
Share on other sites

Looks like the project is set up to use webpack. Don't know if you want to go this route, but you can use different modules like requirejs with webpack.

https://github.com/webpack/webpack/tree/master/examples/mixed

 

Or you might want to just ask the author is he can make a dist version. I'm sure there are other people out there that don't want to use a module loader.

Share this post


Link to post
Share on other sites

Hi,

i made this tool to be able using React and GSAP together

[Github](https://github.com/azazdeaz/react-gsap-enhancer)

[Demos](http://azazdeaz.github.io/react-gsap-enhancer/#/demo/update-and-animate-transform)

Please issue me know if you have an idea to make this better! (Or made something cool with it :simple_smile: )

 

The problem is React suspect that nothing else mutates the DOM of the components. So if you mutate it React will respond with tons of errors. This fix this problem by removing all the extra mutations before the React render() than restarts the animations.  

 

This is fantastic my friend, I will have more of a play with it and get back to you on how I go :)

Share this post


Link to post
Share on other sites
Is there any way somebody with React experience could provide a reduced test case in codepen (or whatever) that demonstrates the problem that we need to overcome? In other words, if you use React's findDOMNode() to find the correct target and then animate that directly with GSAP, what do I need to do in order to break it?

 

Sorry, I'm very new to React. 

 

Is React literally trashing the node that's animating at some point (when render() is called), and then swapping in a new node, thus GSAP is targeting the wrong thing at that point (nor more animation)? I just need something that shows the issue so that I can dig in and fix it (or try at least). 

 

I'm hearing lots of talk about React, how it abstracts away the DOM updates, etc., how it's not well-suited to any animation library except ones that are built specifically for it, but I'm having a very tough time finding anyone who can actually show me a demo with it broken using GSAP. I don't doubt that it's breaking - I just really need something to explore and tinker with. I've already gotten several things to animate fine in React using GSAP and the findDOMNode() method but I'm sure I'm missing some obvious stuff. Again, I'm a total React newbie. 

 

Help? 

  • 4 people like this

Share this post


Link to post
Share on other sites

Have not looked in the repo posted here, but in general I stay away from extra weight unless really helpful.

 

I do this:

 

npm install -S gsap

 

then import to React like this

import TweenMax from 'gsap'

Though you could probably just  get it in with a script tag in the header.

 

 

then to animate that node make sure you setup a ref to your node :

<div ref="myDiv">
Animate ME!!
</div>

once you have a reference you are good to go and use TweenMax as usual.

TweenMax.to(this.refs.myDiv,0.5,{opacity:.5});

just be careful not to intermix the state or props driven changes that may conflict with styling used TweenMax 

  • 4 people like this

Share this post


Link to post
Share on other sites

Hi Steven and welcome to the GreenSock forums.

 

Thanks for the input and I agree with you in both, the way of animating DOM nodes with react and how to avoid conflicts with the components properties such as state and props, and if anyone finds in the scenario to modify a state property using GSAP, the engine has a very powerful set of callbacks to update using the setState() method.

 

Also I haven't found a sample or snippet that has a component with a CSS based property in the state object so, as Jack mentioned in another post, I don't see how GSAP could break a React app.

  • 2 people like this

Share this post


Link to post
Share on other sites

I've been using greensock since the as3 days (and love it). Over the past year I've been using React full time. 

 

I want to echo what Steven has said. The react questions that seem to be popping up when linked to animation and/or gsap often appear to stem from a lack of understanding about how React works - especially regarding the virtual dom and the importance of the key attribute and lifecycle methods. 

 

Jack has asked for examples of gsap breaking react (in a few threads I believe) but no examples have really popped up. There is no doubt that the linked enhancer above can help smooth out things - but you definitely can work with gsap+react without it.

 

 

Simple things to remember:

 

Use ref instead of findDOMNode

 | In most cases, you can attach a ref to the DOM node and avoid using findDOMNode at all.

source: https://facebook.github.io/react/docs/react-dom.html#finddomnode

 

When using ref, prefer ref callback over the older (yet supported) string variation:

| If you are currently using this.refs.myRefName to access refs, we recommend using this pattern instead.

source: https://facebook.github.io/react/docs/refs-and-the-dom.html

 

Key is key

Key is super important with repeated elements because it's Reacts way of telling if its the same element or not. If an item in a loop has the same key on the next cycle, react won't attempt to unmount the old and mount a new, instead it will just update its props. This is really important for animations because you don't want the next cycle to remove an element that is currently animating. 

 

ReactTransitionGroup

Also very important when items are being added or removed to the DOM. By wrapping your element in ReactTransitionGroup, you can delay when an element is actually unmounted - meaning you can hold off until an animation is finished before an element is removed from the vdom. 

 

 

gsap is no different from all the other non-React-aware libraries out there. TinyMCE, Google Maps, etc can all work with React despite having very complex architecture. Before you scream - "but there is 'react-google-maps' and 'react-tinymce' on npm!" They are quite simple wrappers that, like above, utitilise the lifecycle methods and refs to tap into the dom while staying react.

 

 

Happy to throw some codepens together if needed. 

 

*Edit*

 

Super simple example, can provide more:

 

http://codepen.io/cjke/pen/qqWJzv?editors=0010

 

Things to note is that the overall state is kept declarative (as per Reacts liking). The component is given props about its current state (is it animating, etc) and a child component communicates its internal state outwards via callbacks (again this is standard React  - think like a normal input component, pass value={value} in and onChange callback). 

 

During the timeline animation, the state is maintained (the counter - ironically this is set is via gsap, but the counter state count could be from clicks or anything). 

Edited by cjke.7777
  • 7 people like this

Share this post


Link to post
Share on other sites

Wow, thanks so much @cjke.7777 for the insight! Sounds like you're a seasoned React-GSAP pro. Very happy to have you chime in here. Also happy that it's not terribly difficult to have GSAP work well inside of React. 

 

You should blog about this somewhere ;) 

 

Also, if you have specific recommendations for some sort of "wrapper" that'd make things even easier in React, please let us know. Perhaps it's something you've already tackled and can share with us. (crossing fingers)

  • 2 people like this

Share this post


Link to post
Share on other sites

@greensock / Jack - na no pro, just work in that space a lot. I'm also happy its not difficult to combine two of my fav libraries!

 

Agree about the blogging - I have two project nearing launch - so possibly after those... 

 

Yeah, interesting regarding the wrapper - I'm just not sure it's needed at this stage. Happy for anyone to offer where a wrapper might be needed, and then I could look at putting something together. In the meantime, I think tutorials/samples probably serve to be more useful then extra middleman code (again happy for some to alter my point of view on that one - as maybe I am missing some use cases). 

 

I'm not on these forums often, but feel free to ping me (I've just switched on notifications) if there is a particular react/gsap combo question and I will do my best to answer (though again, not a pro :) )

 

Also, if people have any specific examples they want to see with react/gsap, let me know and I can try to put together some more examples (if not, I can try replicate some animations react-motion and velocity-react are doing, but give them the gsap magic instead). 

  • 2 people like this

Share this post


Link to post
Share on other sites

quick question: 

Does anyone know how to access the react props inside a draggable create object.

Draggable.create(ReactDOM.findDOMNode(this), {
       type:"rotation", 
       throwProps:true,
       onRelease: function() {
            console.log(this.props)
       }
});

i get here the Draggable object on this.

What is the best way to get this React class its in, instead of the GSAP object?

Share this post


Link to post
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.