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
    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
    Polgár András
    @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?

    Polgár András
    @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()?

    Polgár András
    @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.
    Polgár András
    @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)
    Polgár András
    @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?
    Polgár András
    @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
    Bishop Zareh
    @bishopZ
    Hey yo, I am having a problem getting gsap working on react
    When I include gsap, I get the error "document is not defined"
    Any help appreciated
    dk0r
    @dk0r
    ..pretty dead in here but the github appears to be well maintained
    Dan Van Brunt
    @iDVB
    First, this module is great, works the charm. However, we are noticing a considerable amount of code duplication in order to setup each Page with the same Intro/Outro hooks. Has anyone consider how you might create a HOC for this that all pages could use?
    Dan Van Brunt
    @iDVB
    Would LOVE any direction out there on how one might organize/clean up the implementation across a large site with multiple pages
    Is even using a HOC a good idea, maybe a Parent Component instead?
    Dan Van Brunt
    @iDVB
    no one using this module?
    Bram-Zijp
    @Bram-Zijp
    Uncaught TypeError: Class constructor ClassNameHere cannot be invoked without 'new'
    Anyone know why I keep getting this error?
    Bram-Zijp
    @Bram-Zijp
    Had to do with Babel
    Jimmy
    @jimmynames
    yo :wave:
    wondering how I can use gsap to only animate the first two instances of a comp
    almost 'turn it off' post the 2 components rendering
    Jeff Lung YK
    @jefflung
    Hi I wanna learn GSAP for website but not with react
    Chris Knight
    @chrisk2020
    @animatist check out some of the resources on Petr Tichy's site https://ihatetomatoes.net/simple-greensock-tutorial-your-first-steps-with-gsap/
    Jeff Lung YK
    @jefflung
    Thanks @chrisk2020
    Federico Calarco
    @Embeddedbruce
    Hello guys , i would like to implement gsap to my meteor+react project . I've read the document , any suggestions ?
    working for a blockchain project , named nitrate , it is based on movies distribution . nitrate.io
    Dan Proudfoot
    @DanProudfoot
    @Bram-Zijp What did you have to do to fix the issue, babel-wise?
    Osman Ali
    @1yzo
    wondering if the ScrollToPlugin works ?