Menu icon Foundation
View transition plays in the wrong place

I'm using Front Matter to animate between my views but I have the same problems with the standard procedure.

When I animate between the views, the animation works fine but is in the wrong place. After playing, the animated view "snaps" to the right place.

This is my ui view:

<div class="grid-content main-content">
   <div ng-class="['ui-animation']" class="grid-frame vertical" ui-view ></div>
</div>

Then I just use animationIn and animationOut in Front Matter to accomplish the animation.

You can see the problem in the gif below. Not only should the animation play under the menu, but also should it end where it's supposed to be at the end.

motionuitransitionappsviewangular

I'm using Front Matter to animate between my views but I have the same problems with the standard procedure.

When I animate between the views, the animation works fine but is in the wrong place. After playing, the animated view "snaps" to the right place.

This is my ui view:

<div class="grid-content main-content">
   <div ng-class="['ui-animation']" class="grid-frame vertical" ui-view ></div>
</div>

Then I just use animationIn and animationOut in Front Matter to accomplish the animation.

You can see the problem in the gif below. Not only should the animation play under the menu, but also should it end where it's supposed to be at the end.