Streaming live at 10am (PST)

Need help with animation on new site


#1

Hello,

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


http://doa-website.webflow.io
drive.google.com/file/d/1B5hWxsBFi2zu4m9FA_qk5vo0MC9TsI_O/view?usp=sharing


#2

Anybody Please? I could really use some feedback on this. Thanks.


#3

@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):

Then set the interaction to target your child element based upon the class:

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.


#4

Thank You! I will give this a shot and report back - you rock!


#5

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)

google drive video link above
http://doa-website.webflow.io
https://preview.webflow.com/preview/doa-website?preview=3e4c12c23568ec38217e4cf711c40f5a


#6

@edavid please be sure to set the back face to not be visible on your images which are in the front to help resolve that behavior:
CloudApp


#7

THAT WAS IT!!! YESSS - such a simple solution - THANKS SOO MUCH!