Directory

← Back

CompAni

animations for Vaadin flow components

Author

Rating

Popularity

400+

CompAni is a component animator for all Vaadin flow components.

  • simple animations (bend, move or shake a component)
  • entrance animations (for components that are added to a UI)
  • exit animations (for components that are removed from a UI)
  • text animations that animate each letter of a text component (div, h1, h2...)
  • animated navigation between views

Sample code

@StyleSheet(Animation.STYLES)
public class ShowcaseLayout extends AppLayout ...
AnimationBuilder
    .createBuilderFor(myComponent)
    .create(AnimationTypes.AttentionSeekerAnimation.class)
    .withEffect(AttentionSeeker.bounce)
    .withSpeed(Speed.normal)       // optional
    .withDelay(Delay.noDelay)       // optional
    .withRepeat(Repeat.Once)    // optional
    .start();
/**
 * Register an animation for a component that will be show when  
 * the component is added to the UI.
 */
AnimationBuilder
    .createBuilderFor(myComponent)
    .create(AnimationTypes.EntranceAnimation.class)
    .withEffect(EntranceEffect.bounceInLeft)
    .register();
...
layout.add(myComponent);
/**
 * Remove a component with an animation.
 */
AnimationBuilder
    .createBuilderFor(myComponent)
    .create(AnimationTypes.ExitAnimation.class)
    .withEffect(ExitEffect.bounceOut)
    .remove();
/**
 * Just override the enterWith() and exitWith() methods or 
 * override animateWith() to get a fitting enter and exit animation.
 */
public class IndexView implements AnimatedView {
    ...
    public default ViewInTransition enterWith() {
        return ViewInTransition.FadeFromBottom;
    }
    public default ViewOutTransition exitWith() {
        return ViewOutTransition.FadeToBottom;
    }
    
    or
    
    public default ViewTransition animateWith() {
        return ViewTransition.RotateRightAndMoveFromLeft;
    }
}
/**
 * Register an animation for a text component that will be show when  
 * the component is added to the UI.
 */
TextEntranceAnimation entranceAnimation = AnimationBuilder
    .createBuilderFor(myComponent)
    .create(AnimationTypes.TextEntranceAnimation.class)
    .withEffect(TextEntranceEffect.PushReleaseFrom)
    .register();
...
layout.add(myComponent);

/**
 * Animate a text component.
 */
AnimationBuilder
    .createBuilderFor(myComponent)
    .create(AnimationTypes.TextAnimation.class)
    .withEffect(TextDisplayEffect.AboundTop)
    .start();

/**
 * Remove a text component with an animation.
 */
TextExitAnimation textExitAnimation = AnimationBuilder
    .createBuilderFor(component)
    .create(AnimationTypes.TextExitAnimation.class)
    .withEffect(TextExitEffect.ZoomOutTop);
...
textExitAnimation.remove();

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

  • grow / shrink animations
  • corrections / improvements for text animations (timing of end events corrected)
Released
2019-03-09
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 10+
Vaadin 11+
Vaadin 12+
Vaadin 23+ in 2.0.0
Vaadin 14 in 1.1.0
Vaadin 14+ in 1.1.4
Vaadin 13 in 1.1.0
Vaadin 12 in 1.1.0
Vaadin 11 in 1.1.0
Vaadin 10 in 1.1.0
Browser
N/A

Vaadin Add-on Directory

Find open-source widgets, add-ons, themes, and integrations for your Vaadin application. Vaadin Add-on Directory
The channel for finding, promoting, and distributing Vaadin add-ons.
Online