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:
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?
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.
@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.
This still seems to be an open bug that affects basic transform hover functionality when using a simple transform on page load.
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.
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.
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.