Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Karl Parakenings
    @karlnp
    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
    Karl Parakenings
    @karlnp
    more problems: ReactDOM.findDOMNode doesn't work on objects extended with GSAPEnhancer
    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
    or you could use an IIFE i suppose
    Far Tseng
    @farrrr
    Mmm... I know where the problem is.
    madmotts
    @madmotts
    With "target.find" {name: 'thename"} and {id: 'theid'} work. How about className? {className: 'theclass'} no workie.
    madmotts
    @madmotts
    correction. if i use the exact list of classes on an element, {className: "all the classes element has"} it finds it.
    Kirk Strobeck
    @kirkstrobeck
    How do I use power2?
    its showing as undefined and could not figure out how to include/use it