Jump to content
Search Community

azazdeaz

Members

  • Posts

    12

  • Joined

  • Last visited

 Content Type 

Posts posted by azazdeaz

    animachine: GUI for GSAP

    in GSAP

    Posted

    Hi, looks like it took more than a year but the animachine beta is out!

    This release has less features but way more stable and faster. (I had to rewrite the whole thing many times :) )

     

    It's still just a proof of concept and not a ready to use tool but it's ready to try! :)

     

    It also has a website now (: animachine.org

    • Like 2

    React and GSAP

    in GSAP

    Posted

    Hi Praney!

     

    I think, pactically, if you don't want to update the same styles or other attributes that GSAP does, remove animations and they effects from the  component, or select components by they props, you're good to go with that approach.

    React and GSAP

    in GSAP

    Posted

    Hi,

    i made this tool to be able using React and GSAP together
    [Github](https://github.com/azazdeaz/react-gsap-enhancer)
    [Demos](http://azazdeaz.github.io/react-gsap-enhancer/#/demo/update-and-animate-transform)
    Please issue me know if you have an idea to make this better! (Or made something cool with it :simple_smile: )

    The problem is React suspect that nothing else mutates the DOM of the components. So if you mutate it React will respond with tons of errors. This fix this problem by removing all the extra mutations before the React render() than restarts the animations.  

    • Like 4

    Using timeline as an animation target

    in GSAP

    Posted

    Hi,

     

    Instead of .add() a timeline to the other, can i tween it? Like this:

    tl.to(otherTl, 2, {time: 3, ease: Elastic.easeOut})
tl.to(otherTl, 2, {time: 3, ease: Elastic.easeOut})
tl.set(otherTl, {reversed: true})
tl.to(otherTl, 2, {progress: 0.2})

    I tried in the codepen demo and it's working pretty well. (And this is unbelievably cool!  :) ) But i did'n find any mention or documentation for this. (Sorry if i just missed it)

    Does it safe to do?

    If it is, which properties can we animate or toggle?

    See the Pen waXVgG?editors=001 by azazdeaz (@azazdeaz) on CodePen

    Replace target in Animation instance

    in GSAP

    Posted

    Thanks Diaco!

     

    Sorry if i wasn't clear enough, so here is my question:

     

    I have a tween like this:

    var myAnim = new TweenMax(someNode, 1, {x: Math.random()})

    There is any possible way to create an animation which is identical to the myAnim but have an other target if the only information i have is the myAnim instance? 

    Or can i change the target of the myAnim somehow?

    (so i can't have a createAnim(target) function that creates the same animations with the specified targets)

    Replace target in Animation instance

    in GSAP

    Posted

    Hi,
     
    Is that possible to change target of an existing tween (without recreating it like here)?
    Or clone the tween or timeline with the current var-s and the new targets?
     
    It's is important to use the same tween because it can contain some randomly generated var-s which aren't stored anywhere else.
     
    I'm thinking on something like:

    var animation = TweenMax.to(nodeFirst, 1, {x: Math.random()})

function duringTheAnimation() {
  time = animation.time()
  animation.invalidate()
  magicallyReplaceTargets(animation, nodeFirst, nodeSecond)
  animation.restart()
  animation.time(time)
}

    I'm experimenting with a tool to use React and GSAP together. The goal is to let React to rerender any time it wants during the animations while GSAP can directly animate the DOM nodes (not messing with the React component state). It's going well so far, but it would be great to solve the case when the component remount the targeted element.

    See the Pen RPJMwM by azazdeaz (@azazdeaz) on CodePen

×
×
  • Create New...