Jump to content


  • Posts

  • Joined

  • Last visited

Posts posted by icg_cnunez

  1. I have a DOM element that stores a TimelineLite Object in a data object. I reference this stored TimelineLite Object at a given time and call the kill() method on this object.


    From what I understand and desire, the kill() method will immediately stop the animations on the TimelineLite Object and release for garbage collection.


    I have several tweens and potentially timelines nested in the referred TimelineLite Object. I want them all to stop immediately even if currently tweening. They should stop right where they are.


    This is not what I am experiencing. Currently tweening animations/tweens continue to run until completion, and only then do animations stop (do not continue to run).


    Am I doing something wrong here? Should I be using a different method to accomplish the desired result? Should I be getting the nested tweens/timelines and then kill() those first?

  2. I understand.  Yes, I would definitely vote for that functionality. Although, I am able to work with the current functionality as is.  Again, it's just the convenience of it (using convenience methods the way I would like). I am working on my first applications of Greensock, and I already have a need for using repeat functionality in my tweens and nesting them inside a timeline.


    But like you said, I just had to create my TweenMax, and then add it to the timeline. Maybe one day there will be enough demand or need to add the convenience methods as a part of TimelineMax to use TweenMax.

  3. Thank you.


    Any thoughts/plans for the future to make timeline convenience methods intelligently determine whether to use a TweenLite vs. TweenMax based on what's needed to achieve the special properties (basic/advanced) passed in the vars param of the tween?


    That would truly be a convenience method with complete flexibility.


    Just a thought on my part. It would be nice to have.


    Thanks again!

  4. Simple question regarding TimelineLite / TimelineMax .add() with Stagger:


    Is it necessary to do this:

    tl.add([tween, tween, tween], "+=5", "normal", "stagger", 5); // shown in documentation example


    or would you do this:

    tl.add([tween, tween, tween], "+=5, "normal", 5); // what I would expect to do

  5. I have two TimelineMax objects:



    TL1 repeats once with yoyo.

    TL2 repeats infinitely with yoyo.

    TL2 is initially set to paused.

    TL1 plays automatically, & onComplete plays TL2.

    TL2 has onRepeat to pause itself (TL2), and restart(true) TL1 (restart should respect TL1's delay).




    I want the infinitely repeating timeline, TL2, to play and pause at each repeat point of its animation, but this is not happening. Both timelines' playback are controlled by the other. If you look at my Codepen code, you will see that this is not working correctly, and I can't figure out what I'm doing wrong.


    See the Pen nDKoJ by icg-cnunez (@icg-cnunez) on CodePen



    Any help much appreciated.

  6. Yes, that is exactly what I needed. Thank you for clarifying how the timing with the delays work repeat and yoyo.  I initially understood a delay to just apply to the start of the animation one time, and not be included in the repeating. But i see that is not the case.  The delay is included in repeats.

  7. ISSUE:


    Using delay with yoyo causes a timing issue that is strange to me. In other words, I don't understand why I am experiencing unexpected results.


    I will share a JSFIDDLE simplified example that replicates exactly the issue I am experiencing. This is what's happening: I have a delay of 1 and repeatDelay of 1 to continue same delay timing throughout the looping animation. Yoyo is set to true. I would expect there to be a consistent 1 second delay between each tween, but with yoyo in effect, after yoyo returns to the start of the animation, there is a 3 second delay, not a 1 second as repeatDelay defines.








    Why is this happening and how can I achieve the desired behavior with timing, where each delay (delay or repeatDelay) results in only 1 second between tweens throughout the entire animation? Any help much appreciated.

  8. See the Pen agJkA by GreenSock (@GreenSock) on CodePen


    Carl, thank you for the examples.  I like this one, but is there an easy way to make it seamless using the example code you provided here. With this one, the last box has to fade out completely before the animation starts again, whereas all boxes after the first overlap fades. This would be great if the repeat (first box) would would overlap the last one's fade so the looping is seamless.

  9. Thank you for your reply, Carl.


    A little more on what I'm trying to do:  I am cycling through several elements where sequentially one element fades out and the following element fades in. This cycle needs to be a continuous loop.


    When I get some additional time, I will put together a test case in jsfiddle and share it.



    I have a TweenMax with a variable for the target. This target is the current element.


    var currentElement = $("#div1");


    The tween is nested inside a TimelineMax set to repeat. Once the tween completes, an onComplete fires. Within my onComplete function, the target will dynamically change.


    currentElement = $("#div2");




    Target never changes on timeline repeat of the nested tween, even after redefining the variable.


    I know that invalidate() works with changes in vars parameter, but it does not work with the target.




    Is there any way to achieve the intended effect?


    Any help much appreciated.