Run animation when class is added

[majofski]

It seems that when I attempt to run an animation on a class that is added via jQuery, the animation doesn't run. It seems to me that this is because animations run when :

 

a) the document loads

you use a an onclick() to run an animation

 

both of which are out of the option for me.

 

Here is a link to the codepen. You'll notice that when you hit the 'Play' trigger, a class ('open) is toggled on the #search element. When that class is added, I expect the animation to run. It doesn't. Any ideas what I'm doing wrong here?

var $search = $("#search")
var $open = $(".open")

$("#play").click(function(){
 $(search).toggleClass("open");
});

TweenLite.to($open, .4, {y:'100%', display:'block'})

See the Pen bpPaNp by modermo (@modermo) on CodePen

[GreenSock]

Welcome to the forums. I took a peek at your codepen and I think you might be misunderstanding a few things:

 

1) When you select something with jQuery, it's not really a constantly-updating "live" selection. For example, $(".open") will grab whatever elements have the "open" class at that particular moment (when that call is executed), but then if you add the "open" class to some other element later, it doesn't suddenly update your $open variable to contain that new element as part of the selection. That's just how jQuery and pretty much all selector engines that I know of work.

 

2) You had a typo in your code - you had $(search) instead of $search (or $("#search") would work too). 

 

3) You were executing your tween immediately (before any click and before anything had an "open" class). It seems like maybe you assumed that somehow the tween would sit and wait and get activated as soon as something had the "open" class applied to it, but that's not how things work. You can easily get that effect, though, with the right code of course. But keep in mind that by default tweens begin running immediately unless you pause them. So in your case, the tween ran on an empty jQuery object (because nothing had the "open" class applied when the tween was created). Then, onclick, you toggled the class but never actually created a tween for that freshly-adorned "open" element. You can just move your tween code into that block to solve this. 

 

I also assume you wanted to animate the "y" back to 0% when the class was toggled off. You had no code for that either. So here's my [somewhat more verbose for educational purposes] forked codepen that shows what I assume you wanted:

 

http://codepen.io/anon/pen/qZzpmv

 

Better? 

[majofski]

Ah! Thanks for the quick response! Sorry it took me so long to get back to this.

 

Thank you for going into detail with how it all works. I'm still new to Javascript, so the learning curve is steep right now. 

 

That actually works perfectly. Exactly what I wanted.