Jump to content

kreativzirkel last won the day on May 30 2017

kreativzirkel had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Posts posted by kreativzirkel

  1. All solutions require wrapping the different steps, which is what I'm trying to avoid.

    I think what I ask for is just plain impossible.

    // My dream!
    var a = 1;
    if (a == 1) {
        delay(fancyAnimation().pause().totalDuration()); // or better on the timelines onComplete event
    someMoreStuff("that is executed delayed");

    And unfortunately I couldn't grasp "what all the fuzz is about" with promises.


    I don't see where the gsap.then() function excels the eventCallback onComplete.

  2. I didn't think of a parameter for a sub-timeline. Nice! 

    Function-based values also sound promising.


    This definitely helped. Thanks!



    I completely agree that with your suggested solutions in mind it would be just bloaty code for the GSAP library.

    But still I find the thought to stay right inside my timeline-flow, not needing to scroll / jump back and forth to change things, tempting.


    Just for fun and learning I'd like try the .group() idea implementation for myself.

    Is there a way to enhance the TimelineMax object with custom functions?


    Thank you very much, Sirs

  3. Niiiice! Multiquote– love it <3


    Yeah, Craig is right - that's generally what variables are for :)


    The problem with building some sort of API functionality like "until labelXYZ" or "until the end of the timeline" is that it'd require constant re-calculation and GSAP is highly optimized for performance. So if, for example, you have 500 tweens in a timeline and then you move one of them, it'd have to loop through EVERY tween and say "is that one affected by this change?", and then if it was, it could affect one that already changed too and it'd get crazy with recursion. Or internally we'd have to set up dependencies/listeners for timing changes and have those ripple out, but that's more kb and processing. The benefit just doesn't seem worth the cost, especially if it's not terribly difficult for users to do now using variables. See what I mean? 


    I figured there's a reason my request isn't implemented. 

    Although I think many animations (like mine so far) are straight forward and don't change like you describe it (moving parts around while executing) – So it efels like the calculation for "until the end" / "until that label" only needed to be once.

    But I see what you mean and sadly agree–



    A dynamic duration for a tween like that would most likely not be smooth. You'd have to do some animation blending, which is not trivial. Here's an example using the ModifiersPlugin.

    See the Pen RRLxwN?editors=0010 by osublake (@osublake) on CodePen


    Can't you write a function that sets the duration for your scale tween?


    So far I haven't used functions as parameter values. Could you provide an example of what you mean? How exactly would you do what you're suggesting?

  4. Yep, it's me again :D


    Again I hope there is a more conenient way of doing things.

    But I learned my lesson! Here's a codepen: 


    I have looots of lil tweens in a timeline which should have equal position and duration.

    Writing these two down for every lil tween isn't just annoying. When you need to update it, it gets even more frustrating.


    Regarding the position value, labels are a quite okay solution.

    But I find it annoying to type the label at the end of every new tween I add (yes, nitpicky!)


    Different story when it comes to the duration value.

    Of course I could add a variable somewhere at the beginning. But I'm talking huge animations; always scroll up to the variable when I want to change the value? Annoying. And the code readability suffers with so many durationXY-variables.


    And yes, I could make multiple timelines and then call them in a master timeline.

    But that's unnecessary clutter-code. 


    What I imagine is something like this:

    tl = new TimelineMax();
    .to(".someElement", 0.5, { scale: 2 })
    .from(".someOther", 2, { rotation: 90 }, "+=1")
    // a group would somehow just append to the main timeline
    // or we call it .sameDurPos() D:
    .group(5, "-=0.5", function() {
    	// .to, .from etc. would need to be overwritten 
    	// this.to(...) would call tl.to() and mix it with the .group() parameters
    	this.to(".box1", { ...animation properties... }); // does this. even make sense? 8)
    	this.from(".box2", { ...animation properties... });
    	this.fromTo(".box3", { ...animation properties... }, { ...animation properties... });
    	this.staggerTo(".box3 span", { ... }, 0.5);
    .to(".justGoOn", 2, { ... }, "labeeeel")

    I am just looking for ways to focus more on the concepts behind the animation and less on the actual code.

    And as awesome as GSAP is (and it is, .. jeez) I find that some things feel unnatural. 


    Is there a way to enhance the TweenMax object with own functions? So maybe I'm dope enough to implement my own .group() function 8)

    See the Pen JWjPPK by katerlouis (@katerlouis) on CodePen

  5. Thanks for the warm welcome.


    I care a lot about details and finding the right animation for an idea is best done by just doing it. 

    So I find myself often implementing different ideas for an animation and want to do the code quick and dirty, but still care for the little details.


    You see why variables don't satisfy me in this matter. 

    Furthermore, using a master-time-variable limits you in some way cognitively. You always go like /2, *1.5– 


    Not rarely it turns out for an individual step exactly 0.135s is perfect. Finding this with a time variable feels very unnatural and maybe even counter productive.



    Is there really no way to tell a tween something like:

    "ok, from here on out you take all the time exactly until the end of the whole timeline".


    There must be a way..

    It's possible to say 


    Why can't something similar happen in the middle of a timeline? 

    Then the tween looks "okay, the total duration is 10, and I start at 5.5, so I need to do my stuff in 4.5 seconds, ez!"

  6. I have an animation, lets call it "Dumbo", that is needed frequently but irregularly.

    So I am in the middle of a user interaction / deep in a function, we call it "Frankie", and depending on some circumstances I want to trigger Dumbo.
    But now I need Frankie to wait for Dumbo to end. 
    So, clever Frankie thought to pause Dumbo immediately on call, asks of his duration and puts the rest of his own doings in a setTimeout.
    But I don't want to slice up Frankies entrails into pieces where Dumbo and his friends might occur at some time–
    Is there a way to freeze the rest of Frankie without additional nesting?
    Something like jQuerys delay() perhaps?
  7. I'd like to have a dynamic duration for a tween.


    A button animates and builds itself up.

    Then the text animates.

    While the text animates I want the button to scale just a tiny bit.

    The scale should exactly end when the text animation is complete.


    During development the timing of the text animation changes extremely often and differs dramatically.

    Remembering to set the scale duration by hand is annoying and unnecessary distraction.

    Calculating the timings of all the parts building the text animation is even more annoying.


    I'd love the scale-animation to have a dynamic duration alá "until end of text animation" or "until end of whole timeline" or even better "until label XY"


    If this isn't possible, which I fear is the case, how do you tackle timings of longer animations parallel to a queue of smaller pieces that should end together?


    Thank you!