Jump to content
GreenSock

pkunzipula

Hover/pulse and toggle visibility all with Greensock

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

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

Link to comment
Share on other sites

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

  • Like 1
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.
×