Improve your Vaadin application with fancy animations

Vaadin is a feature rich framework to develop applications with Java. It provides a large set of components for all kinds of business requirements and a convenient programming model to connect your business logic to a frontend. In this post I will shows examples on how to animate the components and layouts of a Vaadin application to make your customers use it with a 😊 smile.

The CompAni Add-On

The Vaadin Add-On directory provides all Vaadin users with a wide range of useful add-ons for all kinds of business cases. For spectacular animations of Vaadin components you just need to use the CompAni add-on. CompAni (= Component Animator) is the first add-on I published in the official Vaadin Add-On directory and it can be used for all Vaadin Flow versions (10+).

To use a vaadin add-on make sure you have include the correct repository in your pom.xml file (for maven projects):

<repository>
   <id>vaadin-addons</id>
   <url>https://maven.vaadin.com/vaadin-addons</url>
</repository>

Now just include the add-on as a dependency in your project:

<dependency>
   <groupId>de.mekaso.vaadin.addons</groupId>
   <artifactId>compani</artifactId>
   <version>1.1.4</version>
</dependency>

Simple animations (shaking things)

The CompAni add-on gives you the ability to transform all your components with effects. For example, if you would like to stretch a component and twist it like a rubber-band you can use the rubberBand effect on it. First create an instance of the Animator, then apply an animation effect on a component of your choice.

Animator animator = Animator.init(UI.getCurrent());
Div labelDiv = ...
Button animateButton = ...
AnimatedComponent animatedLabel = animator.prepareComponent(labelDiv);
animateButton.addClickListener(click -> {
	animatedLabel.animate(
		AnimationBuilder
			.createBuilder()
			.create(AnimationTypes.ComponentAnimation.class)
			.withEffect(AnimationEffect.rubberBand))
			);
});

This code will animate a Div (with all its contents) when the users clicks a button. To show the capabilities of the CompAni add-on I created a showcase application available at https://mekaso-vaadin-showcase.herokuapp.com/
Feel free to try it out!

Text animations (making your letters dance)

Simple animations can animate a component and all its contents. Text animation will even go a bit further… All letters in a word or sentence will be animated so that it will look like a choreography when the animation has started. Just try it out like that:

Animator animator = Animator.init(UI.getCurrent());
Div someText = ...
Button animateButton = ...
AnimatedComponent animatedComponent = animator.prepareComponent(someText);
animateButton.addClickListener(click -> {
	animatedComponent.animate(
		AnimationBuilder
			.createBuilder()
			.create(AnimationTypes.TextAnimation.class)
			.withEffect(TextDisplayEffect.LetterJump));
});

View transitions (cool effects for your navigation)

CompAni can create animations when your application changes its view (just like you apply an animation for a presentation when you show a new slide). This is even easier that the component animations, you just need to use the de.mekaso.vaadin.addon.compani.AnimatedView interface.

@Route(value = "")
public class TextAnimationsView extends Div implements AnimatedView {
	...
	@Override
	public ViewInTransition getInTransition() {
		return ViewInTransition.ScaleUpDown;
	}

	@Override
	public ViewOutTransition getOutTransition() {
		return ViewOutTransition.ScaleDownUp;
	}
}

Entrance and Exit effects (showing your components VIP style)

Entrances and exits (aka adding and removing) get a special handling by the CompAni add-on. Sometimes you want a component to appear with an animation because it is so important. Another use case could be that you want to create an actions after the component animation is completed and the component is added to your view.

Animator animator = Animator.init(UI.getCurrent());
VerticalLayout loginForm = ...
AnimatedComponent animatedEntranceExitComponent = animator.prepareComponent(loginForm);
EntranceAnimation entranceAnimation = AnimationBuilder
			.createBuilder()
			.create(AnimationTypes.EntranceAnimation.class)
			.withEffect(EntranceEffect.rotateInDownRight);
animatedEntranceExitComponent.registerEntranceAnimation(entranceAnimation);

...
add(loginForm); // animation will start after the component is added

Removing a component (in style) is just as important as the entrance animation.

ExitAnimation exitAnimation = AnimationBuilder
			.createBuilder()
			.create(AnimationTypes.ExitAnimation.class)
			.withEffect(ExitEffect.bounceOutRight);
animatedEntranceExitComponent.removeWithAnimation(exitAnimation);

The official URL for the CompAni add-on on the Vaadin website is https://vaadin.com/directory/component/compani
You can find all further documentation as well as new features there. In the links section you can find the links to

• source code of the add-on
• source code of the showcase application
• showcase application
• issue tracker
• Wiki

As you can see, you don’t need much code to make cool things happen in a business application. While it will not save your project, if your logic does not work, it will still be able to thrill your users and stakeholders… and sometimes this is what makes a decent application outstanding.👍