Animation Help

[jonwgeorge]

I'm trying to display some content that is past the viewport, a sort of "second screen" without the need to actually have a second screen. Here are the basics:

index.gui

<svg id="page" class="portrait-view" pointer-events="visible">
    <g id="screen1">
        [watchface stuff]
    </g>
    <g id="screen2">
        <svg id="stats" x="0" y="300">
            [stats stuff]
        </svg>
    </g>
</svg>

index.js

I have a function that moves these views up and down when the screen is tapped.

let page = document.getElementById("page");
let scn1 = document.getElementById("screen1");
let scn2 = document.getElementById("screen2");

page.onclick = function() {
  vibration.start("bump");
  scn1.groupTransform.translate.y = (scn1.groupTransform.translate.y === -200) ? 0 : -200;
  scn2.groupTransform.translate.y = (scn2.groupTransform.translate.y === -200) ? 0 : -200;
}

Ideally, I'd like for the elements to slide up but so far I haven't figured out how to accomplish that. Any thoughts on how I can make the translate happen over a period of say 0.3 seconds?

[JonFitbit]

I think I would setup the animation using svg, then trigger it from javascript.

Coordinate Animation

https://dev.fitbit.com/build/guides/user-interface/animations/#coordinate-animation

Triggering Animations from JavaScript

https://dev.fitbit.com/build/guides/user-interface/animations/#triggering-animations

[jonwgeorge]

I looked at that the other day, but I couldn't seem to figure out how to toggle it like I want to. I need some kind of state to be able to move the views back and forth.

[JonFitbit · Accepted solution]

let windowIsHidden = true;

function toggleWindow() {
  if (windowIsHidden) {
     // animate to show window
  } else {
     // animate to hide window
  }
  windowIsHidden = !windowIsHidden;
}

[jonwgeorge]

Thanks for the feedback @JonFitbit! I have a little bit more of an understanding of the animation class now, however, I am still having a bit of an issue here. Here's what I have so far.

index.gui

<svg id="page" pointer-events="visible">
  <defs>
    <symbol id="screen1">
      [clock stuff]
      <animate attributeName="y" begin="click" from="0" to="-200" dur="0.3"/>
      <animate attributeName="y" begin="enable" from="-200" to="0" dur="0.3"/>
    </symbol>
    
    <symbol id="screen2">
      [stats stuff]
      <animate attributeName="y" begin="click" from="100" to="300" dur="0.3"/>
      <animate attributeName="y" begin="enable" from="300" to="100" dur="0.3"/>
    </symbol>
  </defs>

  <svg x="0" y="0" width="100%" height="100%">
    <use id="screen1Instance" href="#screen1"/>
  </svg>
  <svg x="0" y="300" width="100%" height="100%" viewport-fill="red">
    <use id="screen2Instance" href="#screen2"/>
  </svg>
</svg>

index.js

let page = document.getElementById("page");
let scn1 = document.getElementById("screen1Instance");
let scn2 = document.getElementById("screen2Instance");

let windowIsHidden = true;

page.onclick = function toggleWindow() {
  if (windowIsHidden) {
     // animate to show window
    console.log("Opening Stats View...")
    scn1.animate("click");
    scn2.animate("enable");
  } else {
     // animate to hide window
    console.log("Closing Stats view...")
    scn1.animate("enable");
    scn2.animate("click");
  }
  windowIsHidden = !windowIsHidden;
}

This all works for toggling the clock view up and down, however, my stats view is no longer being displayed on the page. Not sure why.

[jonwgeorge]

Nevermind, I solved my problem by using Layers.