# Router Animation with Router(-Lite)

**URL:** <https://discourse.aurelia.io/t/router-animation-with-router-lite/6485>\
**Category:** Help Requests\
**Created:** [July 20, 2025, 8:15pm UTC](https://discourse.aurelia.io/t/router-animation-with-router-lite/6485 "2025-07-20T20:15:16Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidsk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidsk/32/930_2.png) [@davidsk](https://discourse.aurelia.io/u/davidsk)\
**Post date:** [July 20, 2025, 8:15pm UTC](https://discourse.aurelia.io/t/router-animation-with-router-lite/6485/1 "2025-07-20T20:15:16Z")

</div>

The router-direct docs have a page on animation on routing lifecycle events but the same does not exist for router(-lite). The example swaps the animation based on whether the user is navigating backwards but I can’t seem to find where the equivalent of navigation.navigation.back is in router(-lite).

Any help appreciated.

> **[Animation | The Aurelia 2 Docs](https://docs.aurelia.io/developer-guides/animation#quick-router-animation-example)**
>
> A comprehensive developer guide that details numerous strategies for implementing animations into Aurelia applications, including component-based animations, router transitions, and advanced animation

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [July 21, 2025, 7:17pm UTC](https://discourse.aurelia.io/t/router-animation-with-router-lite/6485/2 "2025-07-21T19:17:47Z")

</div>

Hi @davidsk, here is a working example: [router - animation example - StackBlitz](https://stackblitz.com/edit/aurelia-router-animation?file=src%2Fanimation-hooks.ts).

I will try to write some docs about this. Thank you for pointing it out. Since you are already using animating the routes, if you want to showcase a better example or contribute to the docs for the matter, feel free to do so.

---

<div class="post-metadata">

**Author:** ![davidsk](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/davidsk/32/930_2.png) [@davidsk](https://discourse.aurelia.io/u/davidsk)\
**Post date:** [July 24, 2025, 4:25pm UTC](https://discourse.aurelia.io/t/router-animation-with-router-lite/6485/3 "2025-07-24T16:25:10Z")

</div>

Hi @Sayan751

I’m just trying to get a handle on the animation support in Aurelia, if I come up with a better example I’ll be sure to raise a PR!

The stackblitz you posted doesn’t demonstrate how to determine whether the user has navigated _backwards_, which is what I was really asking. Incidentally, the animateOut doesn’t seem to be applied, tweaking it slightly suggests that the something is happening for the duration but the content isn’t animated, just disappears when the route is changed.

---

<div class="post-metadata">

**Author:** ![Sayan751](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/sayan751/32/1861_2.png) [@Sayan751](https://discourse.aurelia.io/u/Sayan751)\
**Post date:** [July 27, 2025, 7:09am UTC](https://discourse.aurelia.io/t/router-animation-with-router-lite/6485/4 "2025-07-27T07:09:47Z")

</div>

Hi @davidsk, I tried to find a workaround for this. But I understand that the current state does not offer good infra for detecting history forward or back events. Hence, I have crated a feature request to track and implement that.

> <https://github.com/aurelia/aurelia/issues/2211>
>
> \# 🙋 Feature Request
> 
> 
> 
> Currently, it is difficult to detect the history navigati…on events (forwards or back) in router. An information of the direction in the 'au:router:navigation-start' router event will be helpful for animating the transitions.
> 
> See https://discourse.aurelia.io/t/router-animation-with-router-lite/6485.
> 
> Additional issue: https://discourse.aurelia.io/t/router-animation-with-router-lite/6485/3
> 
> \## 🤔 Expected Behavior
> 
> 
> 
> \## 😯 Current Behavior
> 
> 
> 
> 
> Repro link:
> 
> \## 💁 Possible Solution
> 
> 
> 
> \## 🔦 Context
> 
> 
> 
> 
> 
> \## 💻 Examples