Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Vincentccw

Add class after animation

Recommended Posts

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

Link to post
Share on other sites
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

Link to post
Share on other sites
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

Link to post
Share on other sites

Ah right, this is different in the tweens scope.

tl.to(this, .4, {
  height: 0,
  onComplete: function(div) {
    div.addClass('mainAnimatedClass'); // then only replace with blue div with new height and width
  },
  onCompleteParams: [$(this)]
  // not sure, but you might want to add clearProps:'height' as well
}).play(); // make height to 0
  • Like 2
Link to post
Share on other sites

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

Link to post
Share on other sites

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


});
  • Like 1
Link to post
Share on other sites

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 :-P

Link to post
Share on other sites

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

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×