# How to animate views?

**URL:** <https://forums.bitovi.com/t/how-to-animate-views/751>\
**Category:** Uncategorized\
**Created:** [November 9, 2017, 12:30pm UTC](https://forums.bitovi.com/t/how-to-animate-views/751 "2017-11-09T12:30:51Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 9, 2017, 12:30pm UTC](https://forums.bitovi.com/t/how-to-animate-views/751/1 "2017-11-09T12:30:51Z")

</div>

How do I animate views? i.e page transitions. If I want to slide up a page while clicking a url

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [November 10, 2017, 3:48pm UTC](https://forums.bitovi.com/t/how-to-animate-views/751/2 "2017-11-10T15:48:47Z")

</div>

Hey @rehat, can you link to something that shows the animation you’re looking for? Often you can use 3rd party animation libraries and integrate them with CanJS to get this sort of effect.

Do you want it working with routing? Are you using pushstate or hashchange routing?

---

<div class="post-metadata">

**Author:** ![rehat101](https://avatars.discourse-cdn.com/v4/letter/r/85f322/32.png) [@rehat101](https://forums.bitovi.com/u/rehat101)\
**Post date:** [November 11, 2017, 9:45am UTC](https://forums.bitovi.com/t/how-to-animate-views/751/3 "2017-11-11T09:45:06Z")

</div>

@justinbmeyer - I’m looking for basic animations when the user clicks on a route; slide up, slide down, etc. I was thinking to use animate.css library and add in classes that can animate the views. Yes, I want it work with routing. I’m using pushstate.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [November 14, 2017, 3:44pm UTC](https://forums.bitovi.com/t/how-to-animate-views/751/4 "2017-11-14T15:44:21Z")

</div>

I’m working on an example right now.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [November 14, 2017, 7:15pm UTC](https://forums.bitovi.com/t/how-to-animate-views/751/5 "2017-11-14T19:15:09Z")

</div>

Here’s an example: [JS Bin](https://jsbin.com/hewicep/edit?html,css,js,output)

I didn’t hook it up to routing, but that shouldn’t be a huge issue if you understand how this example works. (Let me know if I’m wrong about this).

The important things to notice:

### The elements are absolutely positioned

Th login / signup pages are absolutely positioned, this helps prevent collisions during the animations. You can likely work around this, but it’s tricky. Let me know if this is a problem.

### It keeps both elements in the page until all animations are complete

I use `page`, `oldPage`, and `shouldDisplay` to make sure both pages are rendered until the animations have completed.

### It works by using `on:EVENT:by:SCOPE`

When `.login()` is called, it updates the properties in a batch:

```auto
    can.batch.start();
    this.oldPage = this.page;
    this.page = "login"
    can.batch.stop();

```

This makes it so computes will not re-evaluate until both `oldPage` and `page` have been set.

Once this batch is done, the page will be updated, we need to make sure the `<div class='login'>` element is in the page before we dispatch the `animateLoginPage` event:

```auto
this.dispatch("animateLoginPage");

```

The `<div>` is listening to these events with:

```auto
on:animateLoginPage:by:this="slideInDown(scope.element)"

```

This calls the animation helper:

```auto
can.stache.registerHelper("slideInDown", function(el){
  el.classList.add("animated","slideInDown")
});

```

We do something similar if the signup page is being shown:

```auto
on:animateSignupPage:by:this="slideOutDown(scope.element)"

```

Probably the trickiest part is to remove the `<div>` from the page once the leaving animation has completed. To do this we can listen to animation end:

```auto
on:animationend="removeOldPage('login')"

```

Unfortunately, this `animationend` fires for both the `slideIn` and the `slideOut`. This is why we only actually removeOldPage if we are the old page.

---

<div class="post-metadata">

**Author:** ![justinbmeyer](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.bitovi.com/justinbmeyer/32/179_2.png) [@justinbmeyer](https://forums.bitovi.com/u/justinbmeyer)\
**Post date:** [November 14, 2017, 7:20pm UTC](https://forums.bitovi.com/t/how-to-animate-views/751/6 "2017-11-14T19:20:18Z")

</div>

Here’s probably a better way of doing it: [JS Bin](https://justinbmeyer.jsbin.com/vucujeg/edit?html,js,output)

I used `inserted` events to fire the slide down:

```auto
on:inserted="slideInDown(scope.element)"

```

And I just used the `page` event to figure out if the `slideOutDown` should actually animate:

```auto
on:page:by:this="slideOutDown(scope.element, 'login', scope.root.page)"

```