katerlouis

Very interesting. Is there a way to read out the steps asigned in SteppedEase.config(), so that the timeline can calculate dynamically? GreenSocks solution solved something I was looking for! "non-linear-stepped Easing", where the animated value is still transitioned with equal steps (x: 10, x: 20, x: 30...), but the timing of these equal steps are not linear. That creates a totally different perception of acceleration in stop motion. Amazing! I made a CodePen to illustrate what I mean; words words words :8 http://codepen.io/katerlouis/pen/gmbeMZ Using GSAP to make GSAP happening. We're in the matrix PS: I wonder why something like `immediateStart` hasn't been implemented in SteppedEase.config() yet?

Carl has answered the question; But for better understanding for others that came here searching. - // wrong... .add(vorhang, "-=.5"); // only triggers the animation // right! .add(vorhang(), "-=.5"); // returns the tl object so GSAP can calculate timings correctly

Thank you very, very much for this quick reply. You rescued the deadline :D such a subtle visual difference– easy to overlook for not-so-experienced GSAPpers (from grashopper, u know!? ) confusing that the function itself without the brackets also triggers the animation. It's also confusing that there are cases in JS where you can actually pass named functions with brackets as parameters (like in this case) and cases where you need to pass on parameters as another parameter in form of an array. Never the less, back to work. Thanks again!

.totalDuration() on `tl` gives me 2.04, but should give me 4.24. Also `onComplete` is fired after 2.04 (I assume, since it is way too early). The timing calculation seems to ignore the added timeline at the end `vorhang`; but the animation `vorhang` executes. All I see though is the part of the animation that plays in half second negative offset. I definitely need this timeline to take `vorhang` into account. Code: var tl = new TimelineMax({ onComplete: function() { animationOverlay(false); } }); tl .set($layers, { opacity: 1, smoothOrigin: false, transformOrigin: blaseOrigin() }) .staggerFromTo($layers, 2, { scale: 0 }, { scale: function(i) { return 2 + 0.2*i }, ease: easing } , 0.01) .to($layers, tl.totalDuration(), { rotation: function() { return rand(7, 14, true); }, ease: easing }, 0) .add(vorhang, "-=.5") ; return tl; function vorhang() { var tl = new TimelineMax(); tl.fromTo(".vorhang-blau", 2, { scale: 0 }, { scale: .7, ease: Power2.easeOut, clearProps: "all" }, 0) .fromTo(".vorhang-weiss", 2, { scale: 0 }, { scale: 1, ease: Power2.easeOut, clearProps: "all" }, 0.2); return tl; } (sorry, no time for a codepen– )

Little update! this here worked just fine: .to($layers, tl.totalDuration(), { rotation: rand(10,20,true) }, 0) Lets say the timelines duration is 6 seconds. When you edit above line to a position offset of `2`, the duration of this tween would still be 6 seconds. Great! Otherwise it would be Oblivion! Now I am looking for a way to ask for a labels position. How could I do that?

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!

Still would love custom ease in JS.

It's not a good idea to hardcode animate back to defaults. What if the color I started with changes in my CSS? So I have to read out the things I want to change and store them in an object. This is no fun; I tried clearProps in the .to() function, which just sets it after the tween-duration. It doesn't animate back to it. I hope that my "default-storing" is already done by GSAP and wonder if somebody could tell me Thanks! Louis