I would really like to use the addon, but i am getting a weird problem. I

Directory a component animator addon for vaadin-flow
1

I would really like to use the addon, but i am getting a weird problem.

I have a verticallayout that i am trying to animate. The verticallayout is centered within a FlexLayout component. When i run the application, the verticallayout is not animated at the center, but towards the lower right corner of the screen. It seems it does the animation and then applies “transform: translate(-50%, -50%)”. Any idea what’s happening here?

Style i am using to center the verticallayout.

.login-form{
  min-width: 320px;
  max-width: 475px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  margin: auto;
  transform: translate(-50%, -50%);
 }
2

I think I could reproduce this. The FlexLayout (or the Vaadin container for a flexbox) can center your login-form:

.flex-container {
	justify-content: center;
}

and your login-form styles could just be:

.login-form{
  min-width: 320px;
  max-width: 475px;
  background: #fff;
  text-align: center;
 }

So just add the flex-container class to your FlexLayout and it should look fine (and do the animations at the correct place):
layout.addClassName("flex-container");

3

I uploaded the testcode i was using to github. Find project [here]
(https://github.com/yusufnazir/testcases).
I used EntranceEffect.bounceIn on the verticallayout.

public class LoginView extends FlexLayout implements RouterLayout {

	public LoginView() {

		VerticalLayout verticalLayout = new VerticalLayout();
		verticalLayout.addClassName("login-form");
		add(verticalLayout);

		Label welcomeLbl = new Label();
		welcomeLbl.setWidth("100%");
		welcomeLbl.setText("Welcome to!");
		verticalLayout.add(welcomeLbl);

		TextField usernameFld = new TextField();
		usernameFld.setWidth("100%");
		usernameFld.setLabel("Username");
		usernameFld.setPlaceholder("Username");
		verticalLayout.add(usernameFld);

		PasswordField passwordField = new PasswordField();
		passwordField.setWidth("100%");
		passwordField.setLabel("Password");
		passwordField.setPlaceholder("Password");
		verticalLayout.add(passwordField);

		Button submitFld = new Button();
		submitFld.setClassName("login-submit-btn");
		submitFld.setWidth("100%");
		submitFld.setText("Log In");
		verticalLayout.add(submitFld);
		verticalLayout.setHorizontalComponentAlignment(Alignment.CENTER, submitFld);

		Anchor forgotPasswordFld = new Anchor();
		forgotPasswordFld.setText("Forgot Password?");
		verticalLayout.add(forgotPasswordFld);
		verticalLayout.setHorizontalComponentAlignment(Alignment.CENTER, forgotPasswordFld);

		final Animator animator = Animator.create();
		add(animator);
		AnimatedComponent animatedLabel = animator.prepareComponent(verticalLayout);
		animatedLabel.registerEntranceEffect(EntranceEffect.bounceIn);
		animatedLabel.animate();

	}
4

Hi,

first use the latest version of this plugin that has a fluent API for animations: [CompAni]
(https://vaadin.com/directory/component/compani)

As you are using an entrance animation, you don’t have to call the animate() method. The animation will be done automatically after you added the component to the UI. Just register the entrance animation like this:

animatedLabel.registerEntranceAnimation(
				AnimationBuilder
				.createBuilder()
				.create(AnimationTypes.EntranceAnimation.class)
				.withEffect(EntranceEffect.bounceIn));

and use the style classes of my first answer (add the flex-container to your flex-layout)

super.addClassName("flex-container");

Here is your complete code:

public LoginView() {
		super.getElement().getStyle().set("justify-content", "center");
		VerticalLayout verticalLayout = new VerticalLayout();
		verticalLayout.addClassName("login-form");
		add(verticalLayout);

		Label welcomeLbl = new Label();
		welcomeLbl.setWidth("100%");
		welcomeLbl.setText("Welcome to!");
		verticalLayout.add(welcomeLbl);

		TextField usernameFld = new TextField();
		usernameFld.setWidth("100%");
		usernameFld.setLabel("Username");
		usernameFld.setPlaceholder("Username");
		verticalLayout.add(usernameFld);

		PasswordField passwordField = new PasswordField();
		passwordField.setWidth("100%");
		passwordField.setLabel("Password");
		passwordField.setPlaceholder("Password");
		verticalLayout.add(passwordField);

		Button submitFld = new Button();
		submitFld.setClassName("login-submit-btn");
		submitFld.setWidth("100%");
		submitFld.setText("Log In");
		verticalLayout.add(submitFld);
		verticalLayout.setHorizontalComponentAlignment(Alignment.CENTER, submitFld);

		Anchor forgotPasswordFld = new Anchor();
		forgotPasswordFld.setText("Forgot Password?");
		verticalLayout.add(forgotPasswordFld);
		verticalLayout.setHorizontalComponentAlignment(Alignment.CENTER, forgotPasswordFld);

		final Animator animator = Animator.create();
		add(animator);
		AnimatedComponent animatedLabel = animator.prepareComponent(verticalLayout);
		animatedLabel.registerEntranceAnimation(
				AnimationBuilder
				.createBuilder()
				.create(AnimationTypes.EntranceAnimation.class)
				.withEffect(EntranceEffect.bounceIn));
	}

and your style class:

.login-form{
  min-width: 320px;
  max-width: 475px;
  background: #fff;
  text-align: center;
 }
5

I followed your instructions and everything is working perfectly.
Great job with the addon. Thank you.