Code
Code Override
Code Component
Framer X

Why do all buttons bounce? Part 2

Overview

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

Solutions:

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.

We could use separate code overrides that associate the buttons with separate data sources. However, it still feels suboptimal — we’d have to create multiple sets of data and multiple code overrides.

How could we do better? Create a code component!

Code component

You know what? Things like animate and Animatable can be used in code components as well. We can pretty much copy the code from Code Override.

    1. Create a code component and use Frame as the root element
    1. Copy the declaration of data into the component class
export class Button extends React.Component<Props> {
  ...
  data = Data({ scale: Animatable(1) });
  ...
}
    1. Copy the onTap function into the component class, change to an arrow function, and change data to this.data:
export class Button extends React.Component<Props> {
  ...
  onTap = () => {
    this.data.scale.set(0.6);
    animate.spring(this.data.scale, 1);
  }
  ...
}
    1. Add two props, onTap and scale, to Frame. Note: being able to use props like onTap and scale is why we need to use Frame. div won’t work.
<Frame
  onTap={this.onTap}
  scale={this.data.scale}
  ...
/>
    1. Don’t forget to import all related things from framer:
import {  Frame, Data, Animatable, animate } from "framer";

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!


© 2018 jimu Labs, Inc.