Hello, fellow Webflow friends! McGuire here. I’m stumped when it comes to a challenge I’m experiencing with interactions.
The challenge I’m facing occurs with three, separate buttons:
Each of these buttons uses an interaction which has an initial appearance of
Move Down 20px and
Opacity: 0%. On page load, the objects move to the origin and the opacity is popped up to 100. So far so good.
The left button uses
In from bottom 1, the middle button uses
In from bottom 2, and the right button uses
In from bottom 3. The only difference between these interactions is a slightly longer delay added to the second and third interaction. The interactions work perfectly on page load.
Here’s the challenge:
button class is set to
Move Up 4px on hover, setting a 1000ms Transform transition from the
None state. It seems—and correct me if I’m wrong—that the initial transform performed on page load is somehow preventing the hover transform from occurring on the buttons.
Can anyone shed some light on this or offer up a fix?
Here is the website: http://caplan-associates.webflow.io/
And, of course, the share link: https://preview.webflow.com/preview/caplan-associates?preview=aa1d1732f296f781234e19f15d638278
Edit: For an example of the desired button hover result, see the rollover effect on the menubar at the top of the website.