Directory

← Back

Animator

Animator allows you to add CSS transitions and animations to any component from the server side.

Author

Rating

Popularity

100+

Version 2.0

The Animator is an extension that can animate any component in your Vaadin application using an easy-to-use server side API. The animations are implemented using CSS transitions and animations in the browser.

It provides low level methods for defining your animations just as you like and not limiting you to a set of predefined animation types (unlike the previous version of Animator and AnimatorProxy).

The Animator is well suited for adding UI flourishes to your app, without overwhelming the user. It's not well suited for building complex animation sequences.

DEPENDENCIES (you need to add these for Maven explicitly in your pom.xml):

  • DOM add-on 0.1.0 (see links on the right side)

Previous versions (1.7 and 1.6)

Animate any component, even sub-windows with a small set of usable animations.

The AnimatorProxy is an invisible component that animates other components directly, without additional component hierarchy or DOM element overhead. In principal, you only need one AnimatorProxy in your application, and you can then animate any other components in that same application: size, position, fading and rolling/curtaining.

The AnimatorProxy also provides a convenient listener mechanism for all animations that are run through it, allowing you to make actions after an animation has finished.

See the online demo for available animation types and examples.

All animations allow you to specify the duration and delay of the animation. The animations are atomic, so they won't repeat automatically each time the user reloads the application.

Version summary

3.0 == Vaadin 8 2.0 == Vaadin 7, connector extension, CSS transitions and animations 1.7 == Vaadin 7, legacy component, JS animations 1.6 == Vaadin 6, JS animations

Sample code

Animator.animate(component, new Css().opacity(0));
Animator.animate(component, new Css().translateX("100px")).delay(1000).duration(2000);
AnimatorProxy proxy = new AnimatorProxy();
layout.addComponent(proxy);

Label label = new Label("Animate Me!");
proxy.animate(label, AnimType.FADE_IN).setDuration(500).setDelay(100);

// This listener will catch all animations that are passed through this proxy
proxy.addListener(new AnimationListener() {
  public void onAnimation(AnimationEvent event) {
    System.out.println(event.getAnimation());
  }
});

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

Animator add-on now works with Vaadin 8

Released
2017-09-26
Maturity
EXPERIMENTAL
License
Apache License 2.0

Compatibility

Framework
Vaadin 8.0+
Vaadin 6.4+ in 1.5
Vaadin 6.3+ in 1.0
Vaadin 6.5+ in 1.6.6
Vaadin 7.0+ in 1.7.0
Browser
Firefox
Opera
Safari
Google Chrome
iOS Browser
Android Browser
Internet Explorer

Animator - Vaadin Add-on Directory

Animator allows you to add CSS transitions and animations to any component from the server side. Animator - Vaadin Add-on Directory
Version 2.0 ========= The Animator is an extension that can animate any component in your Vaadin application using an easy-to-use server side API. The animations are implemented using CSS transitions and animations in the browser. It provides low level methods for defining your animations just as you like and not limiting you to a set of predefined animation types (unlike the previous version of Animator and AnimatorProxy). The Animator is well suited for adding UI flourishes to your app, without overwhelming the user. It's not well suited for building complex animation sequences. DEPENDENCIES (you need to add these for Maven explicitly in your pom.xml): - DOM add-on 0.1.0 (see links on the right side) Previous versions (1.7 and 1.6) ======================== Animate any component, even sub-windows with a small set of usable animations. The AnimatorProxy is an invisible component that animates other components directly, without additional component hierarchy or DOM element overhead. In principal, you only need one AnimatorProxy in your application, and you can then animate any other components in that same application: size, position, fading and rolling/curtaining. The AnimatorProxy also provides a convenient listener mechanism for all animations that are run through it, allowing you to make actions after an animation has finished. See the online demo for available animation types and examples. All animations allow you to specify the duration and delay of the animation. The animations are atomic, so they won't repeat automatically each time the user reloads the application. Version summary ============= 3.0 == Vaadin 8 2.0 == Vaadin 7, connector extension, CSS transitions and animations 1.7 == Vaadin 7, legacy component, JS animations 1.6 == Vaadin 6, JS animations
Online