I started using webflow recently to design a client’s website and I am having a problem with the main animation on the home page. It seems to work fine in my browser, but when I check it on other Macs in the office - the animation doesn’t function properly.
I used the card flip tutorial to base the image animation from. Each image is supposed to flip around when page loads, then flip back. When you hove over each image it should flip over - then on “hover out” it should flip back.
Here is a link to what it currently looks like when it is not functioning:
I even created a new page and did the animation on ONE image without ROWS or COLUMNS just to see if that was throwing it off - but it still doesn’t work right. PLEASE HELP! Thanks in advance
@edavid what is happening is you have the interaction on the parent element which is rotating and becomes a very small hover target.
Instead, I’d recommend creating a hover trigger on the parent element holding the element which will rotate and target the child class element to rotate on hover.
So in your case, if you instead set the rotate interaction on the parent element (in this case for example your Column 29 element):
Please keep in mind that you’ll need to either create multiple interactions or use the same class names for the child element that is flipping to add this interaction to other elements on the page.
I followed your advice exactly - and although it did make a difference widening the hover area - i am still getting STRIPES from the front side of each picture - when the hover trigger flips the tree image over (SEE VIDEO for reference)