Animation & Hover Effect

I’m experiencing an issue, where if I apply an animation with the animation pane to an element, whatever hover transformation I have applied to that element does not show. It will play the animation and the hover effect in the designer, but once the website is viewed in preview mode or in the published environment, the hover effect does not register.

I’ve tried this with a few different hover effects, and it seems to happen when an item has directly applied the hover and the animation. If the animation is on a wrapper around the group of items, the hover state will work fine.

I need them to be individually triggered, is there any solution to this?

On the homepage, the services cards that animate in, also have a rotate hover efect.
Video preview:


Here is my site Read-Only: LINK

Hi @lindseygem :wave:

Could you please update your post to include the page and location of the interaction you’re having trouble with? Screenshots/GIF’s are super useful :slight_smile: :pray:

Happy to take a look :eyes:

Sure thing, i’ve updated it!

1 Like

Hi @lindseygem

Thanks for updating the links and sharing the video.

I can see that opening your project this morning that there are no longer any interactions set on the elements in question and that it seems to be working the way you want it to?

CloudApp

It’s a tricky thing using hover state mixed with interactions, and they shouldn’t be combined. The hover states are applying a style, while the interactions are creating a CSS animation and they often conflict, which creates the issues you may be having.

With CSS animation, you often have to give a starting point, and this is what can conflict with what you’ve told the style panel, especially when using the transform tool to rotate or skew for example.

If you’re still having trouble, or would like to achieve a different effect, please reach out again and I’ll be happy to help :slight_smile:

The animations are off because its the only way to get the hover state, it is not functioning how I want it to function. If you go in and add an animation to one of those elements, the hover effect will not render.

Hi Mark, I’m still having this issue, can you pop into the environment to test it out?
It doesn’t load anything that is attributed to .serviceitem__wrapper the only thing it does is clicks through as it should as a link, but no hover styles will work if the animation is on the object.

So a specific object cannot have both an animation and a hover effect so it seems.

You will need to remove the hover state and create that animation using the interactions panel.

[*] Remove the transition and transform styles from the style panel on serviceitem_wrapper
[*] Remove the All transitions from the All Links class (Using All Transitions as a transition should be avoided completely)
[*] Create the effect you want using purely interactions. You can create as many interactions on an element as you wish, whether it’s multiple click or hover animations.

Let me know how you get on :crossed_fingers: :slight_smile:

Hi Mark!

It worked by adding the hover effect via the panel instead of in the hover panel in the style editor.

Thanks,

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.