Hover Animation in builder is not working

Technical Questions CMS
1

Hello,

I’m currently experimenting with animations in the Builder.io using the Svelte SDK. While I’ve successfully implemented animations for actions like page load and scroll in view, I’m encountering an issue with hover animations. Specifically, I have a component where the box initially has an orange background color, and I want it to change to lime when hovered over. However, the hover effect is not being applied.

image
image1292×645 41.6 KB

2

Hello @Brijendra,

Welcome to the builder.io forum.

Could you confirm which @builder.io/sdk-svelte version are you using? Recently, we have added the animation feature to our svelte SDK, therefore, it’s supposed to work if you are using the latest version

3

Hi @manish-sharma ,
I am using sdk version 1.0.8.

4

Hello @Brijendra,

Thank you for bringing the issue regarding the hover animation not functioning with the Svelte SDK to our attention. We have successfully replicated the problem and have escalated it to our product team for a thorough investigation.

In the meantime, as a temporary solution, we suggest utilizing a custom CSS approach. Here are the steps you can follow to implement a hover animation using CSS code within the Builder editor:

  1. Navigate to the Style tab → Advanced → CSS Classes, and add a CSS class, for example, ‘card’.
  2. Proceed to the Data tab → Edit Content JS + CSS, and insert the following CSS code:
.card:hover {
    background-color: #000;
    cursor: pointer;
}

For a visual guide, we’ve prepared a demonstration for you in a Loom video, which you can access through the following link: Loom Video

If you have any further questions or require additional assistance, please feel free to reach out.

Thanks,

5

Thanks for your quick response.

6

Hi @manish-sharma I have used this approach and it’s working fine on the component but when I make it a symbol and drag it to other pages this hover effect is not working.

7

Hello @Brijendra,

Is the hover effect not working on the live page as well? Would you be able to share the builder content link where we can test this issue?

8

Sorry for confusion it’s working now. Actually it has taken some time.

1 Like