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
Compatibility
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 componentsSource 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