Animation isn't working

Ask the Community General Questions
1

Sorry, but it is not moving here ?
Must I enable this “feature”?

1 Like
3

Hi there, @Piero_Biasi1 :wave:

I’ve checked your widgets and see that the animation is working. Could you please double-check it?

4

Oh.. It’s barely noticable :see_no_evil_monkey:

2 Likes
5

You can make the animation more noticable by adding this code to the Custom JS field on the General tab of your widget’s settings:

const styles = document.createElement('style');
styles.innerHTML = `
[class*="dialog-message-dots__Dot-sc"] {
  animation: jump 1s infinite;
}

[class*="dialog-message-dots__Dot-sc"]:nth-child(1) {
  animation-delay: 200ms;
}

[class*="dialog-message-dots__Dot-sc"]:nth-child(2) {
  animation-delay: 400ms;
}

[class*="dialog-message-dots__Dot-sc"]:nth-child(3) {
  animation-delay: 600ms;
}

@keyframes jump {
  0% {
    bottom: 0px;
    opacity: 0.5;
  }
  20% {
    bottom: 3px;
    opacity: 0.3;
  }
  40% {
    bottom: 0px;
    opacity: 0.5;
  }
}
`;
document.head.append(styles);

Please try it out and let me know if you like the result :slightly_smiling_face:

2 Likes
6

Hi Max,
Great solution, it works perfectly for me, and the areas where you can customize it are obvious.
I would suggest that this workaround could be included under Pro Tips.
What do you think?

4 Likes
7

Yep, absolutely agree! We’ll add this solution to the Pro Tips category :wink:

1 Like