Framer Controller

npm install framer-controller

👉 Click here to download an example project with demos for each controller.

Introduction

The framer-controller library provides tools for managing state in Framer X overrides.

The library includes Controller, a class that provides an interface for setting the values of a Framer X Data object. As in React classes, the controller's setState method will merge the provided values into the controller's state. Because the Controller's state is stored in a Data object, changing its state will refresh overrides with the new values.

Controlled state simplifies many things that would otherwise take plenty of boilerplate. For example, Controller now supports a simple animate method that works with animejs, animating props and setting state automatically.

While Controller might already be a useful pattern, the class is really just a starting point for building more task- and component-specific controllers. By extending Controller, a designer can create an interface of methods related to a certain component or state management pattern.

The library comes with several such controllers:

• CounterController - for incrementing and decrementing a value
• IntervalController - for making state changes on an interval
• SelectionController - for tracking a selected item or items
• RelativeController - for setting props relative to another state or set of prosp
• IndexController - for tracking and changing an order of items
• FetchController - for fetching data from a REST API
• FormController - for managing form values, validation and state
• PlacesController - for fetching place predictions and details from Google Maps API

The library also includes controllers for Framer X's Page and Scroll components.

• PageController - for controlling a Framer X Page component
• ScrollController - for controlling a Framer X Scroll component

Hooks

As of Framer X v24, overrides can also include React hooks. Newer versions of this library will replace the controllers above with more efficient hooks-based controllers. As a preview, see:

• createPageControls - a set of controls for the Page component.

Installation

The easiest way to install framer-controller is to install the Framer Controller package from the Framer X Store. Installing the package will also install this library.

To install manually, run npm install framer-controller from your project's Project Folder.

Usage

1. In an Overrides file, import the desired controllers from framer-controller.
2. Create an instance of your controller.
3. Assign its properties and methods to components using Overrides.

xxxxxxxxxx

import { Override } from 'framer'

import Controller, { FetchController } from 'framer-controller'

​

const controller = new FetchController({

    url: 'https://randomuser.me/api/',

    parse: (data) => data.results[0],

})

​

export const ImageContainer: Override = () => ({

    background: controller.data && `url(${controller.data.picture.large})`,

})

​

export const FetchButton: Override = () => ({

    onClick: controller.refresh,

})

See each controller's documentation for information on how to use the controller and examples.

Extension

For help creating your own controllers, see the Build Your Own section.

Made with ✨by @steveruizok