Framer X Pro Tips

Code

Code Override

Framer X

Why do all buttons bounce? Part 1

2018-11-25

Overview

All three buttons are assigned with the same override Scale. Why do they all bounce when only one button is clicked?

Solutions:

Use different overrides for each of them (this tip)
Use code component

Why does this happen?

Why? Because all three buttons are associated with the same data source, data.scale. When it changes, the scale prop of all three buttons are updated accordingly.

To fix it, create separate code overrides that associate the buttons with separate data sources, like so:

const data = Data({
  scale1: Animatable(1),
  scale2: Animatable(1),
  scale3: Animatable(1)
});

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

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

...

Improvement: DRY

DRY, acronym for Do not Repeat Yourself, is an important principle in programming. In this example, we can reduce repetition by extracting the common code into a function, like so:

function buttonOverride(scale) {
  return {
    scale,
    onTap() {
      scale.set(0.6);
      animate.spring(scale, 1);
    }
  };
}

export const Scale1: Override = () => buttonOverride(data.scale1);
export const Scale2: Override = () => buttonOverride(data.scale2);
export const Scale3: Override = () => buttonOverride(data.scale3);

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!