[Hover/pulse and toggle visibility all with Greensock]

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

[How to do the 2nd most basic tween there could be...?]

Thank you, Rodrigo.  I will definitely search this forum better next time.  That was exactly what I needed...

 

Jonathan...is your example creating the pulse effect?

[How to do the 2nd most basic tween there could be...?]

Hello, GSAP Community!

 

I am brand new to GSAP, and I can't wait to get a grip on it.  I have been looking at the documentation, watching videos...and it occurred to me that ... how do you do something as simple as a hover effect, say a box-shadow, like the orangeGlow example?  

 

I can get the effect to play forward on-hover, but how do I reverse it off-hover without repeating the same set of animations back to the original values?

 

Sorry for getting so basic, but I gotta start somewhere.  Thank you all for your efforts with this amazing script!

 

-James