kreativzirkel

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; someStuff(); if (a == 1) { fancyAnimation(); 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.

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

Niiiice! Multiquote– love it <3 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– 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?

Yep, it's me again Again I hope there is a more conenient way of doing things. But I learned my lesson! Here's a codepen: http://codepen.io/katerlouis/pen/JWjPPK 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(); tl .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)

Argh; and I thought the sweet names would make it easier. I will make a demo during the day, although this is a general question– It looks like I have no other choice then to split up the insides of Frankie in multiple functions and call them seperately.. Bummer– (Deadline is close; I'll get back to you guys with more details)

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 animation().pause().totalDuration() 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!"

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?

I'd like to have a dynamic duration for a tween. Example: 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!