Can't seem to make this work, i tried it this way but i dont get any animat

Directory CompAni
1

Can’t seem to make this work, i tried it this way but i dont get any animation.

    private final Button animateButton = new Button("animate");

    public ImportView() {

        final Animator animator = Animator.init(UI.getCurrent());
        Div labelDiv = new Div();
        labelDiv.add(new H1("Component Animations"));
        AnimatedComponent animatedLabel = animator.prepareComponent(labelDiv);

        add(labelDiv);

        animateButton.addClickListener(click -> {
            animatedLabel.animate(
                    AnimationBuilder
                            .createBuilder()
                            .create(AnimationTypes.ComponentAnimation.class)
                            .withEffect(AttentionSeeker.bounce)
                            .withSpeed(Speed.normal)
                            .withDelay(Delay.noDelay)
                            .repeat(Repeat.Once)
            );
        });

        add(animateButton);
    }

pls help I have no idea what I’m doing wrong.

2

Your code should work. If you are working on a spring boot project, don’t forget

@Bean
public ServletRegistrationBean registerComponentAnimations() {
	    return new ServletRegistrationBean(new ResourceLoaderServlet(), "/compani/compani.js");
}

to load the javascript. If it is still not working, please post the vaadin version you are using and some details.

3

Hello!
With latest version(v23.0.2) add-on not work in latest Chrome and Edge.
In latest Firefox works as expected. If remove from animations.min.css query:

@media (prefers-reduced-motion:reduce),print{
    .animate__animated{
        -webkit-animation-duration:1ms!important;
        animation-duration:1ms!important;
        -webkit-transition-duration:1ms!important;
        transition-duration:1ms!important;
        -webkit-animation-iteration-count:1!important;
        animation-iteration-count:1!important
    }
    .animate__animated[class*=Out]
{
        opacity:0
    }
}

addon work in Chrome and Edge

4

The addon works with the latest Vaadin in all supported browsers. Animations can be switched off in browsers, by using the prefers-reduced-motion property. This is likely the case in your chrome and edge browsers.

[documentation]
(https://web.dev/prefers-reduced-motion/)