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
  };
};

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.