Image/animation playing differently from Vera 3 to simulator

[Noba]

Sorry if this has been asked before, but I'm struggling to find an answer.

I'm currently working on my first clockface which has been pretty fun - It's nice to have a company so open to developers making their own stuff. Having a lot of fun with it. 🙂

I'd like to have an image that fades out to show the clock info when the display is turned on, with button presses to switch between stats shown. This is going pretty well, except for one small kink. When I test it on the fitbit itself by turning on the screen, the image instantly disappears, and the background text fades in, but when I test it on the simulator, both svgs run their animations just fine.

Here is the code with the actual stat and state switching taken out:

import { display } from "display";
import { preferences } from "user-settings";
import clock from "clock";
import * as document from "document";
import * as util from "../common/utils";

// Update the clock every minute
clock.granularity = "seconds";

// Get a handle on the <text> element
const mainDisplay = document.getElementById("myLabel");
const background = document.getElementsByClassName("background")[0];

const infoContainer = document.getElementById("infoContainer");
const imageContainer = document.getElementById("imageContainer");

//Declare variable for stat/state switching
let state = 0;
let mainDisplayText = "";

//Perform animation when screen on, and reset to it when screen off
display.addEventListener("change", () => {
  
  if(display.on)
  {
    console.log("display on");
    imageContainer.animate("enable");
    infoContainer.animate("enable");
  }
  else
  {
    console.log("display off");
  }
  
});

Here is the HTML:

<svg class="background">
  
  <svg id="infoContainer">
    <text id="myLabel"/>
    <animate attributeName="opacity" begin="enable" from="0" to="1" dur="1" final="keep"/>
  </svg>
  
  <!-- mask & cover image -->
  <mask id="imageMask">
    <circle cx="50%" cy="50%" r="130"/>
  </mask>
  
  <svg id="imageContainer" mask="#imageMask">
    <image  x="0" y="0" width="336" height="336" href="clock image.png"/>
    <animate attributeName="opacity" begin="enable" from="1" to="0" dur="1" final="keep"/>
  </svg>
  
</svg>

[MarioDings]

What if: (reverse order)

infoContainer.animate("enable");
imageContainer.animate("enable");
What if:
begin="enable+2" at imageContainer.
I guess, somewhere you reset the status of image and info.
I guess you repeatedly test it setting display on and off at the simulator.

[Noba · Accepted solution]

Thanks for the reply!

So, both methods didn't change much - The first did nothing, the second was a little more odd.

The image stayed for a few seconds before disappearing, and then after would not appear again, but the animation of the first would reset and keep playing.

You're right that originally I was resetting the opacity in display.off, but I removed this after it seemed to make no noticeable difference.

[Noba]

Whoops, didn't mean to click that button lol