Search code examples
javascriptreactjsgsap

tweenMax.to not working in react componentDidMount

I'm trying to use GreenStock TweenMax inside of react's componentDidMount method, but I see that the animation is not triggering (but the onComplete and 'onStart methods fire just fine). I tried a few things based on a hunch and found that when I add a setTimeout for 100ms the animation plays. the hunch is that the element is not really ready at the time GreenStock is called.

I was under the impression that componentDidMount was similar to jquery's $(document).ready()

here is my simple code (without the settimeout written in coffee script:

componentDidMount: ->
  commentList = React.findDOMNode(@refs.commentList)
  console.log commentList
  TweenMax.to commentList, 1,{opacity: 0,onComplete :-> console.log 'TL called'}

the element commentList is being returned properly, but the animation is not playing (but the callbacks on the animation are)

is there something wrong with this code, or does someone know of issues between react and greenstock's tweenmax?

Solution

  • so I had a unique key on the DOM element I was animating require 'uuid' <div key={uuid()}></div> (originally I was doing this with raw js and css3 which needed the element to be re-rendered) so removing it work