Adding motion effect to the badge

Hi,

Thank you for using our plugin. We understand that you want to add a fade-in effect to the badge as well, correct? You can solve this issue by applying a style to our badge class. Currently, we have no option to add this type of effect in the backend, but it is possible by applying CSS.

@sreejithacowebs What would be the exact css for that? ??

Hi,

Could you please add the CSS below to your backend Appearance -> Customize -> Additional CSS or your theme CSS file? If it does not work properly, please contact your theme developer for support.

.acoplw-badge {
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}

Please note that the text “fadeIn” and the time (2s) may be changed as per your requirement.

@sreejithacowebs Sorry, this doesnt work..

Hi,

Could you please try the code below? If it is not working properly, please contact your website developer for assistance.

.acoplw-badge {
?  animation: fadeIn 2s ease-in-out;
 }
 @keyframes fadeIn {
? from {
? ? opacity: 0;
? }
? to {
? ? opacity: 1;
? }
}

Hi,

As we haven’t heard back from you further, we assume that this issue has been resolved at your end and considering this ticket as closed. Please don’t hesitate to get back to us if you require any further assistance or clarifications from our end in the future. Thanks!

Sorry not solved. It loads rightaway, goes away for a second and then performs fade in effect.

Hi,

We have some limitations checking the code on the frontend. Upon inspecting the site, it was noticed that the provided CSS has been removed. Could you please add the code to your theme’s CSS? This will help us investigate the issue on our end. We await your valuable response; please note that a delayed response may result in the ticket being closed.

@sreejithacowebs Code added again, please check

Hi,

We are sharing the corrected style code. Please try using this CSS. As mentioned in the previous email, we have limitations because we can only inspect the frontend for your issue. It would be better to implement the changes with the assistance of your web developer.

.acoplw-badge {
  opacity: 0;
  animation: fadeIn 2s ease-in-out;
  animation-delay: 2s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@sreejithacowebs Now it fades in but then completely disappears. See here https://browmaniac.ee/tootekategooria/eel-ja-jarelhooldus/?orderby=popularity

Hi,

Could you please remove the previously provided CSS and try adding the CSS below?

.acoplw-badge {
    opacity: 0;
    animation: fadeIn 1s 0.5s forwards ease-in-out;
}

@sreejithacowebs Thank you, this resolved the issue!

Hi,

Happy to hear that! Your appreciation helps us improve our quality.

@sreejithacowebs Hi, the motion effect is suddenly gone. What could be the issue?