Transitions

app/components/clock.hbs

@@ -8,5 +8,9 @@
     flex-1
   ">
 
-  <p class="opacity-70">{{this.formattedTime}}</p>
+  <p class="opacity-70">
+    <div id="liquid-timer" class="inline-flex">
+      {{liquid-bind this.formattedMinutes}}:{{liquid-bind this.formattedSeconds}}
+    </div>
+  </p>
 </div>

app/components/clock.js

@@ -4,10 +4,13 @@ import { inject as service } from '@ember/service';
 export default class ClockComponent extends Component {
   @service presentation;
 
-  get formattedTime() {
+  get formattedMinutes() {
     let minutes = Math.floor(this.presentation.elapsedTime / 60000).toString() || '0';
-    let seconds = ((this.presentation.elapsedTime % 60000) / 1000).toFixed(0).toString() || '0';
+    return minutes.padStart(2, '0');
+  }
 
-    return `${minutes.padStart(2, '0')}:${seconds.padStart(2, '0')}`;
+  get formattedSeconds() {
+    let seconds = ((this.presentation.elapsedTime % 60000) / 1000).toFixed(0).toString() || '0';
+    return seconds.padStart(2, '0');
   }
 }

app/controllers/application.js

@@ -16,6 +16,7 @@ export default class ApplicationController extends Controller {
 
   @tracked speaker;
   @tracked slide;
+  @tracked transitionDirection = 'crossFade';
 
   init() {
     super.init(...arguments);

app/styles/app.css

@@ -29,7 +29,16 @@
     flex-1
     flex-col
     items-center
-    justify-center;
+    justify-center
+    min-h-screen;
+}
+
+.transitions-container {
+  @apply w-full min-h-full;
+}
+
+.transitions-container > .liquid-child {
+  display: flex;
 }
 
 .pagination {

app/templates/application.hbs

@@ -1,26 +1,28 @@
 {{#let (concat "slides/slide-" this.slide) as |Slide|}}
-  <Slide
-    @speaker={{this.speaker}}
-    class="
-      {{concat "slide-" this.slide}}
-      {{if this.speaker "hidden md:flex w-3/4" "flex"}}
-    " as |slide|
-  >
-    {{#if this.speaker}}
-      {{#unless this.presentation.hasStarted}}
-        <div class="timer-overlay w-full md:w-3/4 md:h-full bottom-26 md:top-0">
-          <button class="underline" {{on "click" this.startTicking}}>Start Presentation</button>
-        </div>
-      {{/unless}}
+  {{#liquid-bind Slide use=this.transitionDirection class="transitions-container" as |Slide|}}
+    <Slide
+      @speaker={{this.speaker}}
+      class="
+        {{concat "slide-" this.slide}}
+        {{if this.speaker "hidden md:flex w-3/4" "flex"}}
+      " as |slide|
+    >
+      {{#if this.speaker}}
+        {{#unless this.presentation.hasStarted}}
+          <div class="timer-overlay w-full md:w-3/4 md:h-full bottom-26 md:top-0">
+            <button class="underline" {{on "click" this.startTicking}}>Start Presentation</button>
+          </div>
+        {{/unless}}
 
-      <AdjacentSlides />
-      <SpeakerControls @notes={{slide.notes}} />
-    {{/if}}
-  </Slide>
+        <AdjacentSlides />
+        <SpeakerControls @notes={{slide.notes}} />
+      {{/if}}
+    </Slide>
+  {{/liquid-bind}}
 {{/let}}
 
 {{#unless this.speaker}}
   <FullScreen />
 {{/unless}}
 
-{{outlet}}
+{{liquid-outlet}}

app/transitions.js

@@ -1,8 +1,6 @@
-// doesn't work in octane even with jquery enabled
-// export default function(){
-//   this.transition(
-//     this.toRoute(function(routeName){ return true }),
-//     this.use('toLeft'),
-//     this.reverse('toRight')
-//   );
-// }
+export default function() {
+  this.transition(
+    this.childOf('#liquid-timer'),
+    this.use('toUp')
+  );
+}

config/optional-features.json

@@ -1,5 +1,5 @@
 {
   "application-template-wrapper": false,
-  "jquery-integration": false,
+  "jquery-integration": true,
   "template-only-glimmer-components": true
 }