Wix Velo Scale Animation Lags Lines

Ask the community
,
1

I tried to rescale the container box on my website in the timeline animation when the mouse is hovering over the box, but when the box shrinks, it leaves a trail of lines:

This is my code:

// When mouse is on featured box
    featuredBox.onMouseIn(() => {

        timeline()
            .add(featuredBox, {scale: 0.95, duration: 500, easing: 'easeOutCirc'})
            .add(featuredText, {scale: 1.05, duration: 500, easing: 'easeOutCirc',}, "-=500")
            .play()

    })

 // When mouse moves off featured box
    featuredBox.onMouseOut(() => {

        timeline()
            .add(featuredBox, {scale: 1, duration: 500, easing: 'easeOutCirc'})
            .add(featuredText, {scale: 1, duration: 500, easing: 'easeOutCirc'}, "-=500")
            .play()

    })

Does anyone how to get rid of the lines when the box shrinks on hover?

2

Please post the URL of your site, and indicate how to reproduce the issue, so we can assist.

3

Here is the url of our site: https://mikekanderson.wixsite.com/photography/portfolio

If you hover over the Featured box, the lines will appear on the right side of the box.

This problem also happens with the images on our home page when you move your mouse off the picture: https://mikekanderson.wixsite.com/photography

4

@karengao2004 I tried this on Chrome, Firefox, and Opera on my Mac and it looks perfect - no lines.

Make sure that you are using a Supported Browser .

5

@yisrael-wix

Thanks!
However, I used the most up-to-date Chrome browser and I am still running into the problem. As you can see in the video below, the scale animation lags lines on the right side when I move my mouse over the box…

6

@karengao2004 The animation in your video looks a bit “choppy”. I didn’t see that when I tested your site.

Do you have any browser plugins that might interfere? Or, it might be a system or network issue. You might want to reach out to Wix Customer Care .

7

@yisrael-wix I’m not sure. I had some friends test it out and they also ran into the same issue. But it’s fine! I just found out that I can add the hover animation to the box without coding it haha and now I don’t have the issue anymore!

I will just use hover boxes instead now :sweat_smile:

Thank you so much for your help!