Vincentccw

Thanks, that does the trick

Hi, I know how to call a function when a timeline animation is complete, but what if I want to call it in the middle of the animation? I want to call the displayContent() after the height=0 animation is called, how should I do that? var $outerBox = $selectedTab.parent('.standard-width'); var animate = new TimelineLite({ paused:true //onComplete:myFunction, //onCompleteParams:["param1"] }); animate.to($outerBox , .4, {height:0,opacity:0,ease:Power2.easeInOut}) .to($outerBox , .4, {height:100,opacity:1,ease:Power1.easeIn}) animate.play(); function displayContent(){ $selectedTab.css({display:'block'});// display selected tab }

I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck... Here is my pen: http://codepen.io/vincentccw/pen/bfojB?editors=101 I can trigger the animation when I hover over the red square but not the button itself (since the animation is store inside the square instead of the button) Thanks for the help in advance

How do I set animation delay to using timelineLine? I have an animation that store inside slideUpTemplate instance /*========================================*/ var slideUpTemplate = new TimelineLite({ paused:true, onComplete:animationComplete, onReverseComplete:animationCompleteRev }); /*========================================*/ I've an button that will hover in and out event attached to it, and call slideUpTemplate.play() and slideUpTemplate.reverse() respectively. My problem is when I hover out I want the animation to delay for 1second before triggering the slideUpTemplate.reverse() method. My initial thought was to use slideUpTemplate.delay(1).reverse() but it only works for the 1st time.....

Thanks for the solution, however I'm trying to animate the button individually. If I use your method, I don't think I can workaround it here is the revised pen: http://codepen.io/vincentccw/pen/aiBjy/?editors=101

Just a quick question, I've created a simple list menu, when I click the "click here" text it is suppose to make all the child list to animate from left to right. However I get Uncaught TypeError: Cannot call method 'play' of undefined Here is my pen: http://codepen.io/vincentccw/pen/dCpok/?editors=111 Thanks for the help.

Thanks, will take a look

Thanks for the help, yes I will redirect the question to their official GitHub page

Is it possible to use a Superscrollorama object to control multiple timelines? My code: http://codepen.io/vincentccw/pen/AwIbx/?editors=111 RIght now the box1 class is animating as intended, but I'm only allowed to animate one box at a time, if I add another timeline below it, the whole animation stop working. Is there a better way to add multiple animation timelines or do I need to create multiple scrollorama object to hold individual timeline>

Thanks will try that out too~~

Thank you for such detail explanation, i really helps me a lot

Thanks again rhernando, the code works perfectly. I know this is a bit off topic since i'm asking more juery oriented question here, but can you explain the extra code in ur pen: if($('li.active')[0] && $("li.active")[0] != this) { $('li.active')[0].animation.reverse(); $('li.active').removeClass("active"); } the animation.reverse will only work with $('li.active')[0].animation.reverse(); or this.animation.reverse(); but not something like $('li.active').animation.reverse(); or $('li').animation.reverse(); .....it gives me error and says animation/ reverse are udefined.Why can't I just apply the animation to other selector?

I got the code snippet from rhernando last time, I've modified the code to make it respond to click instead of hover, now my problem is since each animation is created separately using Jquery each and greensock animation, how should I control all of them at once instead of controlling one only using "this.animation.play()/reverse();" http://codepen.io/vincentccw/pen/BrALe The reason is because if you look into my pen, I want all the buttons to reset to its original state before I click on a new one (that means only one button will be activated at the time.)

Working now thanks =)

I'm using timelineLite and would like to check for the state of animation using .isActive, but I got an error Uncaught TypeError: Object [object Object] has no method 'isActive' var tl= new TimelineLite({paused:true}); if(tl.isActive()){ //my code }\ Thanks for the help