Can we have Some Animation on Vaadin Icon after click?

Hello Team, I’m using vaadin latest version, I have one alert button with Bell icon

when user clicks on it I want that the icon should show some effects or some animation (on the icon) like YouTube alert icon so that user knows that his click was successful

I can do it with notification or prompt but want to something special for client appreciation :upside_down_face:

Can anyone help me on this :slightly_smiling_face:

u can make it change the icon to a gif with animations

Can share any example it will be so helpful to understand

Can we have Some Animation on Vaadin Icon after click?

icon.addClickListener(ignore -> {
icon = new Icon("animation", "icon");
//update the view
});```

dont know if that would work but guessing

so… I’m not sure if you’re after a particular effect here since I don’t know what the “youtube alert icon” animation looks like, but there are a couple of options here:

  1. Switch to an animated image when the button is clicked.

  2. Apply some simple animation (e.g. rotation or scaling) with CSS when the button is clicked.

For option 1, replace the java-applied icon for an image applied with CSS.

For option 2, read up on CSS animations.

You also need to decide what state should trigger the animation. You could
a) Use the native active state, which is applied while the button is being pressed, but stops when let go.
b) You could apply a css classname to the button when clicked, but in that case the CSS animation is your best bet since those can be stopped after a certain amount of time.

None of this is trivial, and none of this is specific to Vaadin. It’s a general animations-on-the-web challenge.

I’ve created an example with a spinning button on click / with disable on click activated https://github.com/vaadin/web-components/issues/842#issuecomment-1007331620