Jump to content
Search Community

Add class after animation

Vincentccw test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...