Hi,
I am trying to create a animation triggered on hover in and hover out where the graphic rotates 180 degrees clockwise on hover and on hover out rotates a further 180 degrees in the same clockwise direction back to the original position (instead of changing direction and going counter clockwise).
I have tried a heap of variations in the animation rotate settings using start positions etc but can’t seem to get it, in some instances it continues in the same direction once but when you hover a second time it seems to revert to clockwise for first movement and then counter for the second again.
Is it possible to control the direction of the rotation?
https://preview.webflow.com/preview/jsd-test?preview=427c8cb9261e1a8016ae0accc11dff7a
Yep, the hover will be challenging because there’s no “Active” state available. The element will only have 2 states - On & Off. I’ve tried numerous actions with hover and you can basically go - In or Out.
Click triggers will definitely work better for what you’re trying to do, because you can get multiple actions to take place.
- You can click once
- Then click twice, then have another div appear over this one
- Then click once
- Finally click twice
Of course it takes some thought but you’ll get your range of “Clicks” with 2 layered divs. Give click a try.
Hope that helps.
Hi Gary,
Thanks for looking into it for me, it is something I am keen to trigger on hover rather than click, it is kind of like a hover state rather than a confirmation of click in terms of usability style.
I am happy enough with it the way it is, but maybe it something that could be achieved with a little JS?
Thanks again, John
Gotcha. Not a problem. Take care.
Hi Gary,
Actually I think you have the answer there for me, if I have duplicates of the moving graphic and apply one animation to one of them for hover and a separate animation to the other for hover out it will give the illusion of continually moving clockwise.
So… thanks!!
Update… I spoke too soon, never as simple as it seems in your head 