Hover/pulse and toggle visibility all with Greensock

[pkunzipula]

Hello Greensock community!  This is a newbie question about writing efficient code and what Greensock is capable of...

 

I have this Codepen with various snippets taken from suggestions in this forum...

 

The point is to have a div of filterable items with a hovering pulse effect on the items and a straight hover effect on the buttons.

 

See the Pen kvsjA by pkunzipula (@pkunzipula) on CodePen

 

Issues:  

The buttons don't retain their active state when clicked [hover(over,out) reverses pink color]

The boxes play, but do not reverse...

I am using Jquery to show and hide the selected objects...is it possible to change display values as part of the Greensock animation instead?

 

As a newbie, I'm not sure how much of this can I do with Greensock animation, vs. writing CSS rules and applying classes and using Jquery (show/hide).  I am very bad with script, so if someone could help me clean this up and explain what is happening, I would really appreciate it.

 

Thank you guys for all your help so far!  Have a great day!

 

-James

[Rodrigo]

Hi James,

 

Nice effect, good job!!

 

In terms of changing the display of course GSAP can do that, it handles any CSS property you throw at it, just keep in mind that the syntax is camelCase and that for that type of properties the value must be passed as a string, so your code would be like this:

$(".control").click(function() {
  var nameo = $(this).attr('id'),
      showit = $("."+nameo),
      showLine = new TimelineLite();
  
  showLine
    .to(box, .25,  {scale:0, opacity:0.3, display:'none'})
    .staggerTo(showit,.25, {scale:1, opacity: 1, display:'block'},.05);
});

As you can see I created another timeline in order to handle the items in sequence, first you fade them out and then you show the filtered ones.

 

As for keeping the active state of the buttons, that's a little more tricky. You definitely need to add something in the click event and some sort of conditional logic in the out event or simply remove the out event handler for that particular element and then add it again when you click another element.

 

Best,

Rodrigo