Streaming live at 10am (PST)

Hover interactions between buttons interrupting animation?


#1

I'm hoping someone can explain this to me, as I've a tad confused with the whole thing.

I'm still wrapping my head around how all this works, but I've run into a situation where hovering over an element plays the animation (fine), but if i go straight onto the next hover element, the animation doesn't work. If hover back over a blank part of the site the animation plays fine. (sorry if that sounds confusing!)

Offending parts are in the 'Print' section of my folio site.
https://webflow.com/design/km-media?preview=a644f9f73b35d2a5f0feba814c2cbf4c


#2

Hi there Karl, well, I took a look at your preview site, in the print section, and to me, everything seems to hover in and hover out OK. Can you be a little more specific, which element in print section is not animating correct? I took a look at each of the 4 pictures there, and when I hover, I get your text and fade in and fade out on mouse hover, and at least, it looks to me like it is working, so if you can give more detail, it helps smile

Also, is the problem happening only on published site? Have you checked if there is any difference between your previewed site and the published site?

Cheers


#3

Hi Dave,

The problem is when the mouse goes from one element straight to the next one (or the one under it), it's like the full animation of the heading text dropping in on hover is interrupted. The fade in background colour works fine, it's only the heading text.

If you go from white space on the left to the top-left element (natures best) it animates fine. Now try going from natures best to the lashes one directly next to it. See how the heading animation doesnt happen?

thanks for the response wink


#4

Hey Karl, well at the moment, I can tell you why it is happening, and that is because each of the hover-details elements have a trigger to make the details-h4 text headings animate. When the mouse is dragged quickly from one element to another, the details-h4 animation has not completed it's previous transistion state, so if the next hover_details containing div is having a mouse hover before the previous animation is complete, because the heading texts all have same class, the animation starts at the position the previous details-h4 text heading was at... this means, just before you mouse out of a hover-details element, the details-h4 text heading is already at the end of the animation, and does not change until you mouse out... but because all the other text headings are using the same class, and the previous animation has not finished, the starting point of the next animation is starting at the end of the initial hover animation... when you drag your mouse to a white area, you are outside of all hover areas, and the animation has a chance to complete, thus the next time you hover again to any element, the animation works ok.

wow, that gave me a headache trying to say that smile

I think, what you need to do, is to either give your text headings different class names and then make a copy of the hover interactions so that each element has their own, independent interaction, if you do not want to run into this problem... I have to look at it some more, to see if this can be done without having to give different class names to elements or copy the interactions to make those independent of each other... but since they are not independent currently, the main issue is that the animations do not have time to complete, before the same class is triggered by the next animation.

One note: by giving each of those elements their own independent interactions, by assigning unique class names to each of the animated text headings, you can probably then set the initial state of the text heading within the same "gallery-hover-heading" interaction, thus removing the need for the "gallery-heading-initial" interaction, so you can just create one interaction per hover_detail element (so you would end up with 4 separate interactions). Currently you have two interactions and although it works, you could do it all with one interaction. You will still end up with 4 interactions though, if you separate these out and make the animations independent of each other...

So to summarise:

  1. Change each of the hover-details elements to have own class like hover-details1, hover-details2 etc
  2. Change each of the details-h4 elements to have own class names like details-h4a, details-h4b etc
  3. Add an initial state in the gallery-hover-heading, on the details-h4a (and each of the other headings) so that initial state is -50px and opacity is 0
  4. copy the interaction so you have 4 of these, change the names of the classes you are targeting in each interaction
  5. save and preview or publish and it probably will work as you intended.

Like I said, there may be some other way to do this without having to create independent interactions, but I not have time to more closely look at that at the moment. it could be that you just need to give unique class names to the headings only, then just change the target classes in each interaction you have copied to point to the correct text heading class (details-h4a, details-h4b, etc).

Cheers


#5

Thanks for the detailed reply Dave.
Ahh the joys of the intricacies of css! Out of interest, do you know if these Webflow IX animations are css3 tranisitions or javascript based?


#6

these are css based and triggered by javascript, see @thesergie reply below...

Yes so much fun working with webflow smile


#7

Actually they are all CSS based using CSS transitions and transforms. They are just triggered using javascript. The CSS is placed inline (vs in the stylesheet).


#8

Thanks I stand corrected smile


#9