Hi everyone,
I have a trouble with loop animations on mouse hover/hover out interaction.
I created an animation for the “hover” and another one for the “hover out”. Everything works great, but if I check the “loop” checkbox for the “hover” animation, it doesn’t stop moving even if I move the mouse out of the element.
This is very strange because I created a looped behavior in another place on my site and it works perfectly.
Hope you can help me!
Hello @jscprumus,
The loop option doesn’t stop once is activated. Can you share your read-only link? I think for what you are trying to do, you have to add another animation, opacity 100% when the element is hovered, only for the animation, and 0% when it is hover out? I would be easier to help you with a link to your site.
Hello @Pablo_Cortes
This is the read-only link.
“Collection project” is the element with the trigger and “Project_name_grid” is the element I want to loop during the hover and get back to its original state when hover out.
Hello @jscprumus,
So I looked into your site, and got to see the animation that you are doing. I still don’t get what you are trying to accomplish. Do you want the element “project_name_grid” to rotate without stoping on hover, and to stop the rotation once the element is hovered out? if that is the case, I don’t think you can use loop that way. I think the loop option only works when animations get repeated over defined intervals of time. I tried to make it work but nothing worked. If you want to get the element upside down on hover and back to place on hover out, that is totally possible, and you don’t need the loop option for that.
Hi @Pablo_Cortes
The animation itself is not important now, but I changed it in order to explain you what I want to do. (check the link!)
I want that “project_name_grid” scale and rotate in loop. When the state is on hover out, this element should get back to its original scale and rotation.
I use this behaviour in another place on my site and it works perfectly!
Hello @jscprumus, I’ll take a look, what is the other element that you have with the similar animation?
It is the “Flip_Link_Wrapper” in the homepage. Are you able to see this page?
Hello @jscprumus, I tried to make it work but I think it is a glitch, and I think it has to do with the projects page coming from a collection list? I’m sorry I can’t help you. But I suggest you to contact webflow directly because since what you are trying to accomplish can be done, you are doing almost the same thing on your home page, maybe it is a glitch that gets fixed once the page is published and only the support team at webflow can help you with that. Or, and this worked for me in the past, is to delete your page and build it again, I know that takes time, but for some reason sometimes going through the process of building again with the issue in mind, helps avoiding the issue a second time.
One thing I can help you with though, is that for a more 3d effect on rotations give “div block 32” a children perspective of 1000px.
Good Luck with your problem. Please let me know if you find out a solution. Take care.