With code overrides, you can make layers on the canvas interactive, animate them, have them react to user gestures, and let them share data. Applying an override to a layer Editing override files What are you ‘overriding’? HOC versus legacy overrides A closer look at a legacy override Importing another file An override is a […]

open in CodeSandbox (You can also tap the indicators to directly go to a page.) Code component We use React’s useState() hook to keep track of the current page. Pro tip: When using the <Page> component in a React project (like in the CodeSandbox above), set the box-sizing of all elements to border-box. Like this, […]

Here, an onTap() event and Framer’s useCycle() hook are used to cycle between two visual states. open in CodeSandbox Code component Code override

First, our component needs the most basic functionality: We should at least be able to select a segment by tapping it. Let’s make this thing interactive. The index stateTap handler functionDisplaying the selected segmentThe index state I added an index state variable (and a setIndex() function to change it) with an initial value of 0: export default […]

Let’s take a simple code component and smarten it up to clearly see which code changes are needed. Version A: Made green by a prop Version B: Greenness is a state What is changed? Version C: The prop updates the state What is changed? Version D: The state is shared What is changed? Event handler […]

An outspoken kid The code overrides Event handler property control More moods Isn’t useCycle() better?   Social components, those that share their state, are often UI controls. A social input field, one that shares the entered text, can be used to display that text somewhere else on the screen. A social slider, which shares its current […]

A component can have only props or only state, but also both. So what’s the difference between them? What are props? What is state? Props are like a library book; state is like your diary Where to save the state? The useState() hook Example: Car Props State Animation Example: Kid State Props Thy prop shalt […]

With the useState() hook, we gave our override its own state. Framer’s CreateStore function also provides a state, but one that you can share between overrides. Local state versus shared state Local state: in the override Shared state: use CreateStore Communicating between overrides How to use CreateStore Import it Create a store Call useStore() inside […]

📘 The Framer book – 💫 G: useCycle() | H: useAnimationControls() | I: Keyframes open in Framer  Basic use Stopping an animation Return after drag A sequence of animations A sequence with pauses and repositioning Inserting a pause Repositioning Same sequence, multiple elements Sharing an AnimationControls object between overrides A sequence animating separate elements Overrides […]

📘 The Framer book – 💫 D: Variants | E: useState() | F: Animate Presence open in Framer  Basic use More states Using the current state in calculations Example 1 Example 2 – Code component version Example 2 – CodeSandbox version Example 2 – Code override version Multiple properties Using useState() purely for… state First […]