Code
Code Override
Framer X

Play an animation on load, not just onTap

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.

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.