Streaming live at 10am (PST)

Transform on hover not working after transform on page load

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. :sunglasses:

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. :heart_eyes:

Here’s the challenge:

The 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? :grin:

Here is the website:

And, of course, the share link:

Edit: For an example of the desired button hover result, see the rollover effect on the menubar at the top of the website.

That’s quite odd. I can reproduce that behavior but I wouldn’t have thought interactions would have caused that issue. I figured out a workaround by creating an additional trigger of hover and doing the offset 4px on the interaction instead of the hover state.

Interesting approach—love that idea. I’m still concerned about this behavior, and was able to reproduce it again in a blank project.

@DFink, the hover interaction is an approach that can work. I appreciate your reply, and have used the workaround as a temporary fix to a larger problem.

It’s complicated to do that workaround because I have to manually add a scroll over and scroll out transition to each and every interaction (the loads are timed differently for different buttons to enter sequentially). Also, I was using some of the same interactions (fade in and scroll up) on other objects that weren’t buttons, meaning the hover+transform behavior would apply to all sorts of unintended things like paragraphs. The workaround is doable, but it’s definitely a headache.

Shout out to @PixelGeek for assisting me via email regarding this issue. :sunglasses:

This still seems to be an open bug that affects basic transform hover functionality when using a simple transform on page load.

Have you tried adding a second trigger to those elements?

Yes. Originally there were three interactions I was using for various elements on page load. The only difference was the wait time:

By adding a second trigger (on hover) to achieve the rollover effect, every single element on the website (including text boxes, photos—anything that was using these interactions) now transformed on rollover. :unamused:

The workaround involved me adding the roll over/roll out to each of these, then creating three more interactions by duplicating each interaction, and manually reassigning elements all over the website to these new interactions.

I’m left with six different interactions instead of my original three. If I want to change the animation timing, I’m left having to manually edit all six. If I want to change the “Move Down” distance, I have to manually edit all six. If I want to change the transition time, I have to manually edit all six.

To clarify: If a load interaction uses Transform, the Transform property won’t work for that element on hover. :neutral_face:

Thoughts? If there’s an easier way to do this, I’m all ears! Technically, it is a workaround, but it seems like an insane amount of work compared to having the transform on hover effect just work.

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.