Ember Animated Tools

As we saw in the last video, our animation currently has a bit of a bug.

If we slow it way down

{{#animated-if isShowing use=this.transition duration=20000}}
{{/animated-if}}

we can see that pressing the button makes the text fade in past the boundaries of our box.

Now to address issues like this, we're going to need to inspect the DOM. That's because Ember Animated works by animating CSS properties of DOM elements - there's nothing fancier than that going on. Ember Animated calculates the visual end state of an element, and then smoothly manipulates the relevant properties from their starting values to their ending values.

So, to debug this animation, we need to inspect the HTML and CSS just like we would if we were debugging a static page in our app.

Now, if we try to debug this animation in its current state, it's hard because the animation is moving. We need to be able to focus on the intermediate state of this transition.

Fortunately, Ember Animated provides some tools to help us do this.

Let's install the ember-animated-tools package:

ember install ember-animated-tools

Ember Animated Tools gives us a widget that we can use to control the timing of our animations. We use it by adding the <AnimatedTools> component to our app.

Let's add it to our application template:

{{! pods/application/template.hbs }}
<AnimatedTools />

{{outlet}}

And now we have a widget on the top-right of our app that's going to help us debug our animations. It's very powerful, as we can slow down and even pause our running animations without having to modify any of our application code (like adding a long duration to our animated-if component).

Now that we can pause our animation halfway through, we can inspect our box and see exactly what's causing the overlap.

It looks like if we add an overflow: hidden rule to our box, it will hide all the extra text. Let's make the change in our template:

- <div class="max-w-sm mx-auto rounded mt-8 p-8 bg-white shadow-lg rounded text-lg">
+ <div class="max-w-sm mx-auto rounded mt-8 p-8 bg-white shadow-lg rounded text-lg overflow-hidden">
    ...
  </div>

Now our animation looks great!

The <AnimatedTools /> component is going to become indispensable as we work more and more with Ember Animated.

View the full diff on GitHub.