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

  • hide / show animations
  • updated animation libraries
  • refactorings
Released
2021-05-05
Maturity
TESTED
License
Apache License 2.0

Compatibility

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

CompAni - Vaadin Add-on Directory

animations for Vaadin flow components CompAni - Vaadin Add-on Directory
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
Author Homepage
Source Code
Issue tracker
WiKi
Showcase Source
Online Demo

CompAni version 0.5.1
+ text animations + fluent API for animation creation

CompAni version 0.6.0
+ animation end listener + performance improvements + bugfixes

CompAni version 0.7.0
+ grouping of text animations (entrance, exit, animation)

CompAni version 0.8.0
+ grow / shrink animations + corrections / improvements for text animations (timing of end events corrected)

CompAni version 0.9.0
+ animated navigation between views + minor bugfixes

CompAni version 1.0.1
+ bugfix in maven structure

CompAni version 1.1.0
+ code cleanups and improvements + added another provider for new animations (vortex, power on/off...)

CompAni version 1.1.1
+ support for Vaadin 15 added + added more entrace / exit animations

CompAni version 1.1.2
+ improved spring boot support + enhanced resource loading

CompAni version 1.1.3
multi UI support

CompAni version 1.1.4
+ hide / show animations + updated animation libraries + refactorings

CompAni version 2.0.0
rewrite for Vaadin 23+ builders for all animations

Online