Jump to content
Search Community

Remove hover state on click to start animation/ hover is conflicting

T.Gregory test
Moderator Tag

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

$(".iSmall, .shrink").on("click", function() {
 
  if (circle.reversed()) {
    circle.play();
  } else {
    circle.reverse();
  }
    
});

 

Regarding above ^ Where and how do you add in a line to kill the hover to start the click? The hover conflicts with the timeline...

 

It seems this would be a very common issue since a majority of clickable links have hover effects, but I have found less material on this on the web than the career of Milli Vanilli. Maybe not that many links are actually the element that is animated. 

 

Also, I think it must be done differently with tweens and timelines because even the few examples I have found (to unbind the hover state on click) didn't work at all.

 

So if you go to my codepen, there's a main vertical Nav with a link near the top with the text "Shrink."

 

and there is a squashed looking mobile nav in the top left corner with the middle link reading, "SMALL - LG" 

 

They are both linked to the same timeline you will find in the js window.

 

On the main Nav, the hover state conflicts because it happens to be the element that is going to be animated. On the little mobile Nav, there is no conflict because the link isn't in a timeline. 

 

Please Note that the animation is not working correctly on the Pen and things looked squished in general, but that shouldn't matter in answering - as I'm looking for a general answer on how this is done. 

 

I welcome any answers or input as I am new to jQuery, Greensock, and writing forums. . .  also computers and electricity and reading/writing. LOL seems that way, 

 

Thanks in advance anybody who answers.

See the Pen zvOegb by code-a-la-mode (@code-a-la-mode) on CodePen

Link to comment
Share on other sites

One of the tough things with your example is that there is a lot going on and it is split between CSS pseudo-classes/transitions and Javascript. With so much going on, it's tough to actually determine what your goal is. I think you want to first create a list of behavior/action requirements and then begin to address the "how" part.

 

While I'm not entirely sure what it is you're looking to do, it might be worth taking a step back and not using pseudo classes, but use Javascript to assign classes (for which you have similar CSS rules) based on other events (like mouseenter, click, mouseleave, etc.)

Link to comment
Share on other sites

Hey Shaun, Thanks for the reply. 

 

Are you familiar at all with the Sortable Draggable grid that Blake OSU made for Greensock? I modified it into an image gallery with a killer hover effect and had the same problem there but that one is all GSAP and jquery. 

 

Blake's been away for a while so I haven't asked him, But I made a pen of it that you can check out and then see what I mean on more of a GSAP environment. 

 

Here's the pen link:

See the Pen MagmOV by code-a-la-mode (@code-a-la-mode) on CodePen

 

The click and hover functions start at line 202 of the js. 

 

As simply as I can put it, the intent of this is to enlarge the thumb twice. A full enlargement on hover is too chaotic, so we do one scale up on hover and then a second on click.

 

So -  in gallery > hover > *image scales up 50% > click > image scales up another 50% > AT THIS POINT the hover has overridden and the image scales down only on mouseOUT not letting you click to close. (I've read that hover needs to be unbinded on the click function)

Well, mission accomplished sort of, But the user will get confused as its not what they are expecting. 

 

If Blake's code is not outside your arena of knowledge i'd appreciate your input. I've been on the 1 yard line with this one for over two weeks and its very frustrating to not have the resources to the finish it. I don't know how else to move forward without help, there's nothing in the docs this specific and I'm burnt out on guessing syntax etc.. 

 

If this isn't your area, if you could recommend someone who could help me, I'd appreciate that as well. 

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.
×
×
  • Create New...