Killing A Timeline Applied To Multiple Elements

[OneManLaptop]

Hey, so I've created a nice little hover effect which I apply to several buttons using .each() but for the life of me I can't work out how to kill the hover effect so that I can apply a different hover effect to it after I apply a transition to the buttons.

I know this is more of a logic problem than a GSAP one, but I've used every "kill" method I know of, but for the life of me I can't work out how or where to call the code so that it kills this hover effect.

I've created a very reduced example. The intention is that when you hover the red boxes, they grow and turn blue, then when you click them, they shrink and turn green. At this point the hover timeline should be killed so that I can apply an alternative hover timeline but this is where I come unstuck.

 

On lines 47 - 50 you can see my attempts to kill the timeline. Again, I know this is a logic rather than any inherent problem with GSAP but if somebody could point me in the right direction, I'd be very grateful. Thanks.

See the Pen bGoXaaQ?editors=1010 by OneManLaptop (@OneManLaptop) on CodePen

[OSUblake]

Hi OneManLaptop,

 

I'm just trying to understand everything here. The initial hover I get, but when you click on an item, the rest of the items change? So what happens when clicking again? It would probably help if you listed all the different states and what happens when in those states.

[OneManLaptop]

40 minutes ago, OSUblake said:

Hi OneManLaptop,

 

I'm just trying to understand everything here. The initial hover I get, but when you click on an item, the rest of the items change? So what happens when clicking again? It would probably help if you listed all the different states and what happens when in those states.

 

Hey OSUblake, thanks for responding! Maybe my demo is a little overly reduced, I'll quickly go step by step:

 

1: User hovers over box - box turns blue and number (span) moves slightly along the x, y axis

2: User clicks box - all boxes turn green and height is reduced to 20px

3: User hovers over any box - boxes remain at a height of 20px and green and don't tween in any way when hovered over

 

As I say, this is a reduced example and for the final effect contained on the website I'm building, it is the intention that once the user clicks on the box and the boxes all change to their green and 20px height state, I'm then able to apply a new hover effect on them but for the life of me, I can't figure out how to kill the original hover tween (tl) on all the boxes, once one has been clicked.

Actually as I was typing this out, I did edit the pen a little changing the:

$("body").on("click", ".item", function (e) {

 

 to

 

$("body").one("click", ".item", function (e) {

 

As the click only needs to be recognised once and I've added my attempts to kill(); the original hover tl to the onComplete of the animatieNav timeline, line 54.

Hope that's all a bit clearer and many thanks for taking a look.

[OSUblake]

I'm just making sure I understand everything before attempting to touch your code. kill isn't going to work like you might be thinking because you still have event listeners attached that are referencing it.

 

So after #3, what happens if I click another box that isn't blue? And what is the new hover effect going to be? 

[OneManLaptop]

28 minutes ago, OSUblake said:

I'm just making sure I understand everything before attempting to touch your code. kill isn't going to work like you might be thinking because you still have event listeners attached that are referencing it.

 

So after #3, what happens if I click another box that isn't blue? And what is the new hover effect going to be? 

 

Right, okay! So I did put a temp fix in place which did just turn off the event listeners:

 

$(".item").off('mouseenter mouseleave');

 

But I thought better of it in the end, as:

1: I'm loading other pages in via Ajax and for performance, it's always just best practice to kill timelines which reference content that no longer exists.

2: I assumed that turning the listener off wouldn't disassociate the tl from the boxes themselves, so would create problems when I tried to apply another timeline to them.

 

Anyway, so after step 3, I would use the each method again, to apply a new hover timeline to them, this time changing the background colour to white and adding a drop shadow around the edges when hovered. I didn't think to include this in my example, as I assumed that once the tl had been killed it would just be a case of rinse and repeat in terms of applying the new hover effect! Clearly there's more to it than that!

[OSUblake]

What I like to do for stuff like that is to create an array of objects. On that object, you can put anything you want, like functions to control stuff created elsewhere. So I only have 1 function on the object at the moment, navClicked, but it allows to me to cycle through and kill all the timelines and remove the event listeners. I could easily put another function on there would set up the next hover effect.

 

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

 

[OneManLaptop]

10 minutes ago, OSUblake said:

What I like to do for stuff like that is to create an array of objects. On that object, you can put anything you want, like functions to control stuff created elsewhere. So I only have 1 function on the object at the moment, navClicked, but it allows to me to cycle through and kill all the timelines and remove the event listeners. I could easily put another function on there would set up the next hover effect.

 

 

 

 

 

Thanks very much, wasn't expecting a full rewrite, wow!

 

Yeah, that's a slightly different way of thinking about it, I'll certainly pay close attention to your example! I'm trying to wean myself away from jQuery and switch to arrow functions at the moment. I always come unstuck when referencing "this" and passing on data attribute values though, so end up retreating to the safety of that dollar sign.  This is a great example to learn from though, thanks for sticking with it bud, really appreciate it.