# Can we make the ViewSlot animateView logic more Generic and Open?

**URL:** <https://discourse.aurelia.io/t/can-we-make-the-viewslot-animateview-logic-more-generic-and-open/2132>\
**Category:** Framework Knowledge\
**Created:** [January 17, 2019, 11:19pm UTC](https://discourse.aurelia.io/t/can-we-make-the-viewslot-animateview-logic-more-generic-and-open/2132 "2019-01-17T23:19:25Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![gooeyideas](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gooeyideas/32/64_2.png) [@gooeyideas](https://discourse.aurelia.io/u/gooeyideas)\
**Post date:** [January 17, 2019, 11:19pm UTC](https://discourse.aurelia.io/t/can-we-make-the-viewslot-animateview-logic-more-generic-and-open/2132/1 "2019-01-17T23:19:25Z")

</div>

In Aurelia it is really difficult to react to dynamic changes to the markup that result from if and repeat.for binding updates. I was testing a custom attribute that extended the attached method on the view to enable this and I noticed that the logic for `animateView` is set up to be the perfect hook for my purposes.

After the ViewSlot is attached/detached it calls the `animateView` method which looks for an animatableElement and if it finds one it passes it into this bit of logic:

```auto
  switch (direction) {
    case 'enter':
      return this.animator.enter(animatableElement);
    case 'leave':
      return this.animator.leave(animatableElement);
    default:
      throw new Error('Invalid animation direction: ' + direction);
  }

```

Instead on looking for animatableElement (typically an element denoted with a ‘au-animate’ class) and calling the `this.animator.enter` or `this.animator.leave` functions we could instead use a binding:

The binding could be something like this:

```auto
<div if.bind="showElement" 
     animate-view="
       enter.bind: onElementEnter($element); 
       leave.bind: onElementLeave($element)">
</div>

```

or something like this:

```auto
<ul class="accordion">
  <li repeat.for="item of list" 
      animate-view.bind="onAnimate($element, $direction)"
      class="collapsible ${$direction=== 'enter' && item.expanded ? 'expand' : 'collapse'}">
  </li>
</ul>

```

The element with the binding would be the “animatableElement” and the binding expressions would replace the default `this.animator.enter` and `this.animator.leave` methods. I think this would make it much easier to interact with dynamic content. Would a change like this be possible without creating a performance problem or breaking other aspects of the framework?

---

<div class="post-metadata">

**Author:** ![EisenbergEffect](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/eisenbergeffect/32/2655_2.png) [@EisenbergEffect](https://discourse.aurelia.io/u/EisenbergEffect)\
**Post date:** [January 18, 2019, 1:02am UTC](https://discourse.aurelia.io/t/can-we-make-the-viewslot-animateview-logic-more-generic-and-open/2132/2 "2019-01-18T01:02:02Z")

</div>

This is an interesting idea. The custom attribute could be virtually behaviorless, just capturing the values or functions. The animation system could check the currently animating element using the `au` property, looking specifically for this attribute class, using its values to configure or replace the current functions. I think the perf cost would be fairly negligible, as it’s just a few lookups. @bigopon What do you think?

I’d love to get some more feedback from the community. This is an interesting idea.

On a related note, in vNext, the new lifecycle itself is much more open and extensible, so it’s possible using new official APIs to actually build stuff like this without requiring any framework code changes 🙂 I’m pretty excited about the new vNext design innovations.