kalreg

I've found out that tl.set may have also onComplete so i can achieve my goal that way. Any other ideas?

Hi, This is more theoretical question so no codepen today. Consider a situation: var obj = { doSomething: function () { console.log("Go go go!"); } } var animation = { myFunc: function() { var tl = new TimelineMax(); tl.to(someDiv, 10, {x: 100}); return tl; } } var next = { var tlMain = new TimelineMax(); tlMain.add(animation.myFunc()); obj.doSomething; } If i run a next object it will start animation, but before it ends i will have output from obj.doSomething. So doSomething doesnt wait for end of animation and it is obvious. Is there any easy way to run obj.doSomething when animation.myFunc() ends playing animation? Of course i could put obj.doSomething in onComplete like: var animation = { myFunc: function() { var tl = new TimelineMax(); tl.to(someDiv, 10, {x: 100, onComplete: function() { obj.myFunc() }}); return tl } } however if you imagine multiple situations like this it makes my code look like russian dolls - one in another, and next in another one - quite unreadable and hard to maintain. Question is: how to have multiple obj.doSomething being executed when animation that is line above finishes. Is that possible? Closest to this is using GSAP "set" function but it only sets css, do not execute whole functions Thank you!

Perfect, that was what i looked for however, documentation of staggerTo do not mention that use of "-=1" as a last parameter is possible.

Thanks for reply. I checked all those pages and - to be honest - codepen is in fact best place for me. If anybody has any other suggestions feel free to post it here.

All tweenMax methods like fromTo or to may have last last parameter like "-=1" or "label". How can I start staggerTo one second earlier that it would start without "label" parameter? Is that possible?

Hi, I am looking for transition and animation inspiration, especially rotating/dissappearing/transiting popups, windows and modals. Where would you suggest i can find some interesting effects that may be idea to copy or inspire? They dont need to be on codepen to easily watch code and edit it. If done with gsap it is even better. Kalreg

Here is my version of Carl's shake - i wanted to achieve a button that is shaking more rapidly - i hope it will help someone. function abc(i) { if ( i > 10 ) { return } i++; TweenLite.fromTo("#button0", 1/(i*2), {x:-3*i/3}, {x:3*i/2, ease:RoughEase.ease.config({strength:5, points:20, template:Linear.easeNone, randomize:true}) , clearProps:"x"}) TweenLite.fromTo("#button0", 1/(i*2), {y: -3*i/3}, {y: 3*i/2, ease:RoughEase.ease.config({strength:5, points:20, template:Linear.easeNone, randomize:true}), onComplete: function() { abc(i) } , clearProps:"y"} ) } abc(0)

After checking i have to say that it works ALMOST as intended. The only problem i've found that while i add next animations to main one all tweens are calculated in moment od addition to main animation, not in the moment of playing. Maybe in most cases it is not a problem, but i need to check which div is on viewport in moment of playing, not at the begining of animation. Can i achieve this in any way?

I have to check if it works, but i guess that's the best answer i could imagine. Clear, elegant, readable, usable. Thank you very much!

Hello, The topic may sound easy to answer - dude! read documentation and use onComplete callback function. Unfortunately this is not anwer for me. Here's the deal. I have and object, lets call it display, that holds multiple methods doing different things with buttons. If i run display.turnButtonOn($("#button0)) it smoothly animates my #button0 within complex animation. However, i also have other methods like turnButtonOff and so on... The problem is that many of my methods in the begining run turnButtonOn method, later some custom animation depending on its purpose, and at the and - turnButtonOff method. So... i could create customAnimation method and: 1. copy/paste turnButtonOn code 2. code customanimation tweens 3. copy paste turnButtonOff code And do something like this to every method within this object. But it is not elegant, not readable and ugly, and not OOP so i am looking for different approach, I also could do something like this: display.turnButtonOn($('#button0'), display.customAnimation) and on last tween onComplete call that parameter with eval (yack!) or something like that. What i'd be glad to achieve is: customAnimation: function () { display.turnButtonOn($("#button0")) // when it is done run custom animation code {...} // when it is done run display.TurnButtonOff($("#button0")) } What would be best way to solve my problem? Thanks ! Edit: I also can start turnButtonOn, and knowing how long has its animation, run customAnimations within delay parameter or event setTimeout, but i dont like this approach because any change in animation needs to be also adjusted in delays..