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?
Answer
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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM