Code
Code Override
Framer X

Make a splash screen with the Page component

Overview

Make a splash screen that plays an animation when loaded. When the animation finishes, transition to the next screen.

Solution

Step 1: Use the Page component

page component

Step 2: Start animation when loaded

See this tip

Step 3: Wait for the animation to finish and switch page

We can override the currentPage prop of Page to change the currently visible page:

export const Page: Override = () => {
  return {
    currentPage: data.currentPage
  };
};

When the animation finishes, we just need to update data.currentPage. However, since the override function can’t be async at this point, we’d have to use the promise syntax to wait for the completion of the animation.

So, instead of this:

export const Splash: Override = async () => {
  data.scale.set(0.6);
  await animate.spring(data.scale, 1).finished;
  data.currentPage = 1;
  return {
    scale: data.scale,
  };
};

We’d have to do this:

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

Notes

Alternatively, we could put the splash screen in the same frame as the main screen, and animate its opacity and zIndex to switch to the main screen. This may be useful if we want to build transition effects that are not supported by the Page component.

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2019 jimu Labs, Inc.