CompAni

animations for Vaadin flow components

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();

Links

• Author Homepage
• Source Code
• Issue tracker
• WiKi
• Showcase Source
• Online Demo

Compatibility