Episode 1

app/pods/1-animated-if/controller.js

@@ -0,0 +1,8 @@
+import Controller from '@ember/controller';
+import fade from 'ember-animated/transitions/fade';
+
+export default Controller.extend({
+
+  transition: fade
+
+});

app/pods/1-animated-if/template.hbs

@@ -0,0 +1,16 @@
+<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">
+      <div class="font-bold text-xl mb-2">Film</div>
+      <p>The individual images that make up a film are called frames.</p>
+      <button {{action (mut isShowing) (not isShowing)}} class='text-blue hover:text-blue-dark my-4 focus:outline-none'>
+        Keep reading
+      </button>
+      {{#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}}
+    </div>
+  </div>
+
+</div>

app/router.js

@@ -7,6 +7,7 @@ const Router = EmberRouter.extend({
 });
 
 Router.map(function() {
+  this.route('1-animated-if');
 });
 
 export default Router;