Streaming live at 10am (PST)

Background interaction glitch

#1

Hey,

So I’ve built an interaction whereby a rollover changes the background image depending on the link rolled over.

Moving the mouse between some elements is smooth and between others its as if the transition has bugged out and the transition is not smooth and I have no idea why - each transition is identical but obviously, the targets are different.

Can anyone offer a solution? Theres a video to show the issue.

https://cl.ly/932e1ef39733

Thanks in advance

Dan


Here is my public share link: https://preview.webflow.com/preview/danielcobbdesign?utm_source=danielcobbdesign&preview=4e2ae65a02bf830751042f3066e0a9c6
(how to access public share link)

#2

Hi Daniel,

First of all I gotta say I love the design! We had a similar issue with our buttons that were supposed to change background image on rollover. In our case it was due to the second or third image that was supposed to show up not loading in time so the interaction looked glitchy.

Way we fixed it was by layering the button (background in your case) with all the possible images its supposed to switch to, then turning their opacity up/down as the rollover happens in each case. That way every possible image is loaded first, then faded in and out on rollover instead of having to be loaded on each interaction.

We achieved that via the “states” function of the designer, in your case I think you need more than 2 states so I suppose you can make multiple background blocks, each with its own image, lay them on top of each other and then fade them in and out with opacity, end result is the same as above.

Might help you out in this case as well.

#3

Hi @S_Nili,

Thanks for the compliment - glad you like it.

Thanks for a possible fix. I’ll look into it - but I think you’re right regarding the fact that the images are taking too long to load between interactions - I’ll look at the image sizes and see if that could be a factor. If that doesn’t work I’l look into your suggestion.

#4

Remove all show/hide actions from your interactions to be sure everything loads on page load and do not stutter. Set your backgrounds to absolute (also set their parent to relative so that absolute positioning of its children can work) and don’t hide them, just leave the opacity at 0.

1 Like
#5

@dram

That works perfectly - thank you :slight_smile: