[Callback function in middle of timeline?]

Thanks, that does the trick

[Callback function in middle of timeline?]

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
}

 

[Cannot trigger animation using a button]

I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck...

 

Here is my pen:

See the Pen bfojB?editors=101 by vincentccw (@vincentccw) on CodePen

 

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

[set delay to TimelineLite?]

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.....

[Animation not playing]

Hi, it is a generally bad idea to store data in DOM/jQuery elements. Why don't you do

See the Pen KLvCi by bassta (@bassta) on CodePen

instead? 

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:

See the Pen ?editors=101 by vincentccw (@vincentccw) on CodePen

[Animation not playing]

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:

See the Pen ?editors=111 by vincentccw (@vincentccw) on CodePen

 

Thanks for the help.

[Using multiple tweens within a Superscrollorama object?]

Thanks, will take a look

[Using multiple tweens within a Superscrollorama object?]

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

[Using multiple tweens within a Superscrollorama object?]

Is it possible to use a Superscrollorama object to control multiple timelines?

 

My code:

See the Pen ?editors=111 by vincentccw (@vincentccw) on CodePen

 

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>

[Resetting greensock animation from each() function]

...

Thanks will try that out too~~

[Resetting greensock animation from each() function]

...

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

[Resetting greensock animation from each() function]

... 

 

 

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?

[Resetting greensock animation from each() function]

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();"

 

See the Pen BrALe by vincentccw (@vincentccw) on CodePen

 

 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.)

[How do you use isActive?]

Sounds like you've got an old version of GSAP. Please download the latest version and try again. The isActive() method was only recently added. 

 

Working now thanks =)

[How do you use isActive?]

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

[Animation not triggering after multiple hover in and out?]

GSAP will run fine.. try going here again..

 

See the Pen gvCAu by jonathan (@jonathan) on CodePen

 

i basically commented out the if statement checking if the element had the animationRunning class.. so now that it is commented out you can keep hovering in and out and GSAP will animate based on the events

 I never thought it would be possible, thanks for the help so far, really appreciate it! 

[Animation not triggering after multiple hover in and out?]

how about this.

 

See the Pen gvCAu by jonathan (@jonathan) on CodePen

 

you will use the onCompleteParams to pass the $this variable to your function in the onComplete callback

 

for example:

var mainTweenSlideDown= new TimelineLite({
      paused:true,
      onCompleteParams:[$this], // pass $this to the turnGreen onComplete  callback function
      onComplete:turnGreen
});

• onComplete: Function - A function that should be called when the tween has completed
• onCompleteParams: Array - An Array of parameters to pass the onComplete function.

  For example, TweenLite.to(element, 1, {left:"100px", onComplete:myFunction, onCompleteParams:[element, "param2"]}); To self-reference the tween instance itself in one of the parameters, use "{self}", like: onCompleteParams:["{self}", "param2"]

found in the GSAP DOCS:

 

http://api.greensock.com/js/com/greensock/TimelineLite.html

 

Thanks onCompleteParams seem to solve the problem,but the problem I mention in the beginning seem to occur again, that is when you hover in and out very quickly for few  times and stop inside the div, the "mouseenter" stop working... I guess that's limitation of the plugin lol...    

[Animation not triggering after multiple hover in and out?]

cool.. basically im passing the $this variable which represents the current element being hovered over or out.. and pass that as a parameter to through the function. So the function can utilize the $this variable.

 

If i didnt pass the $this variable i would have to first declare it outside the scope of the mouseenter and mouseleave event handlers so they can be used in a global scope and context

 

technically you woudlnt need those functions to be outside the mouseenter and mouseleave anonymous functions if they are only being run for those 2 events

 

you could also do this without those functions if they only run for mouseeneter and mouseleave, and have there inside "do stuff code" inside the events:

 

See the Pen GEFqu by jonathan (@jonathan) on CodePen

Thanks for the explanation, unfortunately I need my function to be outside the hovers....

I also notice that I want I want the "toGreen" class to be added after the marginTop:100 animation complete, but I cant seem to do it in my case

 

I have updated my code here:

See the Pen LJiso by vincentccw (@vincentccw) on CodePen

[Animation not triggering after multiple hover in and out?]

when i went to your pen it was not even working.. so im not sure exactly how it is supposed to behave but...

 

I removed the BODY tag from the HTML part since the body tag is already part of the codepen. And i moved your revert and turnGreen functions outside of the event handler.

 

See the Pen IdEuD by jonathan (@jonathan) on CodePen

 

how is this .. ?

Hmmm I just realize when view in chrome it works but not in firefox, thanks for the solution that is exactyly what I mean, Apart from putting using $this on both the hover in and out and placing both function outside the hovers, I saw that you use turnGreen($this) and revert($this)...Why do you need call the function again? Aren't the callback functions already done the job?

[Animation not triggering after multiple hover in and out?]

I not sure this is the right way to do it or not, basically what I want to do is when hover over the div, the paragraph will move down and the title will turn green with class added to it.

 

then when hover out the exact reverse will occur.

 

My problem now is that when I hover over and out multiple times swiftly and land my cursor within the div, the mouseenter animation will not trigger, but when I move my cursor out again and move back in then it will back to normal...

 

What seem to be the problem actually? 

 

 

Here is my code:

See the Pen rpIgD by vincentccw (@vincentccw) on CodePen

[Add class after animation]

Hi, the class is applied, but somehow the browser applies the height: 0 style. You can add !important directive to the CSS and it will work:

 

See the Pen vixAs by bassta (@bassta) on CodePen

Yes I've tried that and works fine =)

[Add class after animation]

T

 

 

Yup, great pens and tips.

 

As Chrysto pointed out, once you tween height, the target element will have an inline height property applied which will be more specific than applying a class to that element.

 

We can get around that also by clearing the height property.

 

Here is another approach I was working with:

 

$('body').on("mouseenter", 'div', function(){

var tl = new TimelineLite({paused:true});


tl.to(this, .4, {
  height: 10,
  onComplete: function() {
    //in here "this" refers to the tween
    //this.target is the element being tweened
    
    //remove inline height style
    TweenLite.set(this.target, {clearProps:"height"});
    //apply new class
    TweenLite.set(this.target, {className:"mainAnimatedClass"}) // then only replace with blue div with new height and width
  }
}).play(); // make height to 0


});

See the Pen a3cb19aa4e43b13813356efa27d9a77e by GreenSock (@GreenSock) on CodePen

 

Thanks I get it now

[Add class after animation]

tl.to(this, .4, {
  height: 0,
  onComplete: function() {
    $(this).addClass('mainAnimatedClass'); // then only replace with blue div with new height and width
  }
}).play(); // make height to 0

Notes

- onComplete fires at the end of that tween. If you add more tweens to the timeline, you could move the onComplete into the TimelineLite vars.

- you don't need to wrap this in $() for GSAP

- default units are already px, so you can just use height: 0

 

Hi thanks for the reply I have updated my code but still doesnt seem to work, the class name doesnt seem to add into the div

 

See the Pen yeqzD by vincentccw (@vincentccw) on CodePen

 

See the Pen yeqzD by vincentccw (@vincentccw) on CodePen

[Add class after animation]

From my code the red cube div suppose to animate its height to 0 first before adding the new div class.

but right now the problem is that both of them seem to trigger at the same time. I have tried using callback function but still doesnt work.

 

How do you ensure the animation is complete before adding the class?

 

 

Here is my code:

See the Pen yeqzD by vincentccw (@vincentccw) on CodePen

[Clear animation timeline?]

Thank you for the detail explanations