Overview

Usually we start an animation when the user taps a button or something, that’s why we use onTap. But how do we start an animation when the screen is loaded?

Solution

Answer: just move the animation code to the function body of the code override.

So, instead of this:

export const Scale: Override = () => {
  return {
    scale: data.scale,
    onTap() {
      data.scale.set(0.6);
      animate.spring(data.scale, 1);
    }
  };
};

We do this:

export const Scale: Override = () => {
  data.scale.set(0.6);
  animate.spring(data.scale, 1);
  return {
    scale: data.scale
  };
};

Delay before the animation starts

async function show() {
  const dummy = Animatable(0);
  await animate.ease(dummy, 1, { duration: 3 }).finished;
  animate.spring(data.scale, 1);
}

export const Scale: Override = () => {
  data.scale.set(0.6);
  show();
  return {
    scale: data.scale
  };
};

Note: we extract the animations into a separate async function and call it from the override. It doesn’t work if you change the override to an async function:

export const Scale: Override = async () => {
  // This doesn't work
  await animate.ease(dummy, 1, { duration: 3 }).finished;
  ...
};

Known limitation

• Note if you put this code into a frame which is linked as the second page from a Page component, usually you won’t see the animation when you swipe to that page. This is because the frame has already been loaded — it’s just not visible. The animation has already been started when the first page is visible, likely way before you swipe to the second page.

• The animation code might be called multiple times. You might want to use an if statement to make sure the animation only plays once.