BackOutUp animation has an Opacity of 0.7 at 100%

[pradt]

Describe The Bug

The animation for BackOutUp has an Opacity of 0.7 for 20% and 100%.

0% {
    transform: scale(1);
    opacity: 1;
  }

  20% {
    transform: translateY(0px) scale(0.7);
    opacity: 0.7;
  }

  100% {
    transform: translateY(-700px) scale(0.7);
    opacity: 0.7;
  }

I wanted to confirm if this is accurate and whether the opacity should actually be 0. With 0.7 since it is an exit animation, if the area is greater than 700px then the element is still visible.

Steps To Reproduce

Apply a BackOutUp animation on a element where the height is greater than 700px

Expected Behavior

The element disapears from the screen either via the opacity.

Screenshots

In the above screenshot the element is still visible.

Desktop

• OS MacOS
• Browser Chrome
• Version 100.0.4896.127 (Official Build) (x86_64)

Smartphone

No response

Additional Context

No response

[pradt]

I just noticed the BackOutUp, BackOutDown, BackOutLeft, BackOutRight all have an opacity of 0.7 at 100%

[warengonzaga]

Thank you for reporting @pradt, if you have a codepen for this that would be helpful for us to debug easily.

[eltonmesquita]

This is by design. Even though animate.css aims to be as easy to use as possible, there are a few things that the developer will have to handle by themselves. This is one of these cases. If we set the opacity to 0 so the element will disappear, the animation won't look as it was intended.

If you think that this should be different, could you please elaborate why? Any examples that might illustrate your POV should be very helpful

[pradt]

This is by design. Even though animate.css aims to be as easy to use as possible, there are a few things that the developer will have to handle by themselves. This is one of these cases. If we set the opacity to 0 so the element will disappear, the animation won't look as it was intended.

If you think that this should be different, could you please elaborate why? Any examples that might illustrate your POV should be very helpful

Thanks for your replies and attention @warengonzaga and @eltonmesquita - i'll prepare a codepen regarding this. The screenshot that I had posted in the ticket is from my project. The expectation was that since it is an exit that it would exit, but it remains visible on screen. I may be misinterpreting this, but the choice of the design by keeping it visible and calling it an exit seems contradictory since it doesn't actually exit (unless it's within the height), imho. It also appears to be contradictory to the other exit animations as such RotateOut, naturally for FadeOut and ZoomOut, as well as BounceOutUp which has 0% opacity at the end (100%) :

@keyframes bounceOutUp {
 20% {
   transform: translate3d(0, -10px, 0) scaleY(0.985);
 }

 40%,
 45% {
   opacity: 1;
   transform: translate3d(0, 20px, 0) scaleY(0.9);
 }

 to {
   opacity: 0;
   transform: translate3d(0, -2000px, 0) scaleY(3);
 }
}

This appears to be the only set of exit animation that stops at 0.7, it would be at the very least helpful to have these consistent. This is currently being handled in my project to manually determine the animation end and to hide the element - however, this feels like its redundant and it is a workaround (i.e in my situation there is a hard stop, as opposed to a gradual fade which would be achieved by setting this to 0).

[eltonmesquita]

Hey @pradt, I had a quick look at the animation again and to be honest, it does deserve some attention 😓

I created #1531 pointing out some issues with some animations, including these ones. I'll work on this for the next major version, v5. Thanks for providing some proper feedback 😄

[pradt]

Excellent, thank you @eltonmesquita much appreciated.