azazdeaz/react-gsap-enhancer

Use the full power of React and GSAP together

Karl Parakenings

@karlnp

(in my case, i mean)

Tahir Ahmed

@TahirAhmed

in my case, when I was trying out different solutions, I accessed the inner ._gsapAnimation method to directly access the actual TweenMax instance and used the respective methods then on e.g. myAnimation._gsapAnimation.timeScale(2).

Karl Parakenings

@karlnp

good thought, but doesn't seem to help

Karl Parakenings

@karlnp

oh, it was my fault! options weren't being set properly which caused a silent error somewhere

András Polgár

@azazdeaz

@karlnp I'm happy to hear that is working now. What kind of error you had? Can i put a check somewhere to make easier the troubleshooting next time?
Thanks for the report, fixed the timescale -> timeScale typo in the readme.
It's a very good idea to call the Animation -> AnimationReference, (as i saw you do in your code) it would be much more clear and easier to talk about it! I think i gonna rename it.

Karl Parakenings

@karlnp

it had no reported error; i thought i was setting the autoplay parameter & length & delay, etc, etc, but was instead defaulting on null/default values, which meant it stayed paused

app code problem, mostly, but you could sanity check animation params

Karl Parakenings

@karlnp

ha! you'll love this, @azazdeaz : nesting decorated anims might blow the call stack with recursion. i'm leaving for the weekend & needt o investigate more, but it's intriguing, don't you think? :P

er, decorated React components which are anims, not decorated anims

i only mention it because it blows it in bindAPI(): http://puu.sh/kVa4J/568a5bf657.png

but i'll investigate further over the weekend

Karl Parakenings

@karlnp

basically: TweenMax.staggerTo creates an array of animations, which are then added to a timeline, which is then added as the component animation

so i think GSAP Enhancer > TweenMax > GSAP Enhancer -> TweenMax Array -> GSAP Enhancer -> TweenMax Element (etc... etc...) might be the issue

but it's friday, so have a good weekend!

András Polgár

@azazdeaz

@karlnp thanks for the explanation but i still don't understand this error. Can you give some more info about how can i reproduce this?

Karl Parakenings

@karlnp

hmm. i'll try and break it down concisely

Karl Parakenings

@karlnp

it basically happens if i try to bind to an animation component

what's really breaking my brain is attempting to nest GSAP enhanced componenets

in particular, using a GSAP animation to apply a bezier curve to a GSAP animation

András Polgár

@azazdeaz

@karlnp can you show how you doing this? (I suggest gist if it is to much code)

Karl Parakenings

@karlnp

i ended up getting it working. i think the most useful approach might be to extend the bindAPI method by adding stubs for GSAP's object api's, and to specifically extend support for wrapped Timelines to be able to add enhanced objects, since it makes semantic sense to add wrapped animations to wrapped Timelines, but GSAP will balk at it and enhanced GSAP won't know what to do with it.

every time i tried to get it working I ran into stack-blowing issues with the Babel-interpreted decorator, but I don't know if it's my approach that's the problem or something else.

eventually I had to just abandon the concept of Timelines entirely and just manually manage delays and starting and stopping animations, which was a bit of a pain. as far as i can tell, wrapped Timelines can manage unwrapped GSAP animations, but not wrapped ones.

also, GSAP methods which work on collections, like TimelineMax.staggerTo, seem to result in strange behaviour, but i don't have any documented instances because I don't know what's going on really - it just didn't work and did so strangely

Karl Parakenings

@karlnp

@azazdeaz also the animations seem to load before React's components do. is it possible to defer their rendering to be in line with the React lifecycle? it causes noticable pop-in

Karl Parakenings

@karlnp

other problems: when creating and managing animations while within for loops, i am having to wrap everything in IIFE's in order to avoid concurrency problems with the generated animations

eg http://puu.sh/kZZWF/cb4b1fb38b.png

Karl Parakenings

@karlnp

more problems: ReactDOM.findDOMNode doesn't work on objects extended with GSAPEnhancer

http://puu.sh/l05nb/8670dd275c.png

András Polgár

@azazdeaz

@karlnp thanks, now i understand! So you do something like this:

const tweenAnimationSource = () => new TimelineMax()
const timelineAnimationSource = ({target}) => TweenMax.to(target, 1, {x: 50})
//....
const tween = this.addAnimation(tweenAnimationSource) 
const timeline = this.addAnimation(timelineAnimationSource) 
timeline.add(tween)

Although i don't see why do you want to do this instead of this:

const animationSource = ({target}) => new TimelineMax().to(target, 1, {x: 50})
//....
this.addAnimation(animationSource)

I think i should hide the non controlling API methods like add()
Can you tell me your use case?

András Polgár

@azazdeaz

@karlnp

more problems: ReactDOM.findDOMNode doesn't work on ~~objects~~ components (edit) extended with GSAPEnhancer

are you sure you're passing a ReactComponent to the ReactDOM.findDOMNode()?

András Polgár

@azazdeaz

@karlnp

other problems: when creating and managing animations while within for loops, i am having to wrap everything in IIFE's in order to avoid concurrency problems with the generated animations

I'm not sure what you're doing here but but to avoid any possible side effects the animationSources should be pure function which are take the target and the options, create a GSAP Animation, and return it. Something like:

const moveCoins = ({target, options}) => new TweenMax().staggerTo(target.findAll({type: 'coin'},  1 , {x: options.x, y: options.y}))
//...in the component
handleClick(event) {
  this.addAnimation(moveCoins, 1, {
    x: event.clientX
    y: this.props.coinY
  })
}

Karl Parakenings

@karlnp

basically, i have an animation, which is a decorated react component with react-gsap-enhancer, a spinning coin, which works and sits in place

next, i want to move it around with another react-gsap-enhancer so it respects the react lifecycle.

Karl Parakenings

@karlnp

@azazdeaz well, add() is a very useful method for a timeline. additionally, people can still use them beforehand and then use addAnimation to add them to a component anyway, so they still need to be bound.

András Polgár

@azazdeaz

@karlnp sorry for the late answer.
That's right, you can use all the GSAP method (in the animation source) to create a GSAP Animation but the object which is returned from the addAnimation() just a controller to that animation so composing them together is a potential bug source because it's not documented how GSAP handles these values internally. (I have to make the readme more clear on this)

András Polgár

@azazdeaz

@karlnp @TahirAhmed v0.2 with react v0.14 is out!
https://github.com/azazdeaz/react-gsap-enhancer/releases/tag/v0.2.0

Far Tseng

@farrrr

I follow the README , but console output error ' Uncaught ReferenceError: TimelineMax is not defined'...

anything I missed?

András Polgár

@azazdeaz

Hi @farrrr,
You have to include TweenMax in some way. (ex load it from CDN or install from NPM)
Thanks, i'll add this requirement to the readme.

Far Tseng

@farrrr

ok, why not require / include in react-gsap-enhancer?

Karl Parakenings

@karlnp

because people use it in different ways

i use it from NPM. many others would prefer to load from CDN for speed/reliability

Far Tseng

@farrrr

yep, you right.

thanks for your help :)

Far Tseng

@farrrr

sorry, I have another questions, I import gsap and everything is fine. but got 'Uncaught Cannot tween a null target.'....

Karl Parakenings

@karlnp

it can't find the selector in the page

Far Tseng

@farrrr

but I console.log the selector result, It has child node.

Karl Parakenings

@karlnp

if you console.log the selector it is resolved at display time in the js console

unless you use util.inspect, but in react that will give you the proxy object not the DOM object without findDOMNode

Where communities thrive

People

Repo info

Activity