Animated If

Ember Animated is the latest animation library for Ember.js apps.

You can find the library here:

• Docs: https://ember-animation.github.io/ember-animated/
• Repo: https://github.com/ember-animation/ember-animated

We're going to learn this library one piece at a time, building up from the simplest primitives to writing our own custom animations.

To start, let's get a quick win by learning about animated-if.

We'll be working with some basic HTML to start out:

{{! app/pods/1-animated-if/template.hbs }}
<div class="w-screen h-screen">

  <div class="pt-8">
    <div class="max-w-sm mx-auto rounded mt-8 p-8 bg-white text-lg overflow-hidden">
      <div class="font-bold text-xl mb-2">Film</div>
      <p>The individual images that make up a film are called frames.</p>
      <button class='text-blue hover:text-blue-dark my-4 focus:outline-none'>
        Keep reading
      </button>
      <p>In the projection of traditional celluloid films, a rotating shutter causes intervals of darkness as each frame, in turn, is moved into position to be projected, but the viewer does not notice the interruptions because of an effect known as persistence of vision, whereby the eye retains a visual image for a fraction of a second after its source disappears. The perception of motion is due to a psychological effect called the phi phenomenon.</p>
    </div>
  </div>

</div>

Let's add some interactivity to our new page. We'll make our button toggle some new isShowing state:

<button {{action (mut isShowing) (not isShowing)}} class='...'>
  Keep reading
</button>

The {{action (mut isShowing) (not isShowing)}} action is a quick way to write a state toggling action entirely inside the template.

Now, let's use our new state to show and hide the long paragraph:

{{#if isShowing}}
  <p>In the projection of traditional celluloid films, a rotating shutter causes intervals of darkness as each frame, in turn, is moved into position to be projected, but the viewer does not notice the interruptions because of an effect known as persistence of vision, whereby the eye retains a visual image for a fraction of a second after its source disappears. The perception of motion is due to a psychological effect called the phi phenomenon.</p>
{{/if}}

And now our button reveals and hides the paragraph.

So, the first Ember Animated primitive we want to use is the animated-if component.

This component serves as a drop-in replacement for our vanilla {{#if}} helper:

- {{#if isShowing}}
+ {{#animated-if isShowing}}
    <p>In the projection of traditional celluloid films, a rotating shutter causes intervals of darkness as each frame, in turn, is moved into position to be projected, but the viewer does not notice the interruptions because of an effect known as persistence of vision, whereby the eye retains a visual image for a fraction of a second after its source disappears. The perception of motion is due to a psychological effect called the phi phenomenon.</p>
- {{/if}}
+ {{/animated-if}}

If we check our work, the works exactly as it did before! That's because we haven't specified a transition yet.

Let's point to a transition property on our backing Controller:

- {{#animated-if isShowing}}
+ {{#animated-if isShowing use=this.transition}}
    <p>In the projection of traditional celluloid films, a rotating shutter causes intervals of darkness as each frame, in turn, is moved into position to be projected, but the viewer does not notice the interruptions because of an effect known as persistence of vision, whereby the eye retains a visual image for a fraction of a second after its source disappears. The perception of motion is due to a psychological effect called the phi phenomenon.</p>
  {{/animated-if}}

Now, let's define a new Controller. We'll import and use the fade transition from Ember Animated, which is the simplest transition that comes included with the library:

// app/pods/1-animated-if/controller.js
import Controller from '@ember/controller';
import fade from 'ember-animated/transitions/fade';

export default Controller.extend({

  transition: fade

});

If we save all this, our test now smoothly fades in and out when we click the button!

This is the simplest way to start using Ember Animated in your Ember app.

View the full diff on GitHub.