What you will learn

import { addPropertyControls, ControlType } from "framer"

const myStyle: React.CSSProperties = {
    height: "100%",
    background: "#09f",
    // Text
    color: "White",
    fontSize: 16,
    fontWeight: 600,
    // Flexbox
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
}

export default function My_first_component_06(props) {
    return <div style={myStyle}>{props.myText}</div>
}

My_first_component_06.defaultProps = {
    myText: "Change my text!",
}

addPropertyControls(My_first_component_06, {
    myText: {
        type: ControlType.String,
        title: "Text",
    },
})

Property controls

That simple component above has a String property control, but there are other types: Color, Image, Number, File, Boolean, Enum, Fused number, Event handler, Transition, and Component instance. We look at examples for all of them.

Component styling

We look at the different ways of adding CSS styles to your components: Writing properties inline, putting them in an object, injecting CSS with a <style> tag, or using CSS-in-JS libraries like Styled Components, Emotion, and Stitches.

Component sizing

How to make your components resizable, work well with Framer’s auto-sizing, plus some mistakes you best avoid.

Motion-compatibility

Make your components react to Framer Motion properties. This way, they can be animated with an override and will respond to whileTap, whileHover, and other events.

Make it smarter

In Smart Code Components, we let components share their internal state and react to property changes.

Importing Framer components

Using JavaScript, Framer’s Time & Date component will always show the current time (or date). I used it here in a recreation of the iOS status bar.

This iOS status bar component has a property control to let you select between Light and Dark modes. The reception, WiFi, and battery icons are SVGs in an (also imported) canvas component with ‘Light’ and ‘Dark’ variants.

Adding a JavaScript library

In this example, I imported the Lodash library of JavaScript utilities and used its flattenDeep() function to clean up a messy array.

MUI

I tried a few components from the main Material UI library:

• A Button (made Motion-compatible so that it works with, for instance, a whileHover)
• A Rating component
• Radio buttons
• A configurable Slider

Chakra UI

And here are some example components from the Chakra UI library.

• A Button (also made Motion-compatible)
• A set of Tabs with content
• A Popover
• Bottom of the page: A set of ‘Skeleton’ components that have a ‘loading’ state

React Bootstrap

You probably know Bootstrap, a CSS toolkit to quickly build a website. Well, React Bootstrap is the same, but then as React components.

• A Button (you can make React Bootstrap’s components also Motion-compatible)
• A Modal that works with a full-page backdrop
• React Bootstrap’s Carousel component

And we ensure that it responds to changes from the outside so that you can change its mode, options, and selected segment at any time.

There’s more

Next to the examples used to explain everything, there are another 35 animation examples that you can check out for free.

An example of reusing Motion values: The big box has a whileTap animation whose values I extracted to animate the rotate, scale, and backgroundColor of the smaller boxes.

Motion values work independently of React. Here’s an example of using ‘state’ (like, e.g., React’s useState()) to change the width of the panels: It doesn’t work as smoothly, and you can’t ‘throw’ the handle.

And here’s a version that uses Motion values: It works much smoother because the animation works independently of React; no React state updates (resulting in a reload) are needed.

The handle’s position gets transformed to width values for the panels with useTransform().

Another example of the useTransform() hook.

Here a Scroll component rotates the boxes on the left: Scrolling 200 pixels results in a 360º rotation.

Plus, as you can see, you can clamp values or add an easing.

A Page component has the same Motion values as a Scroll. Here its horizontal scroll value, contentOffsetX, is used to animate the boxes on the pages.

Page scroll

Scrolling this page changes:

• The length of the SVG Path in the top right (+ the value inside it)
• The position of the box (using CSS’s calc() function)
• Its gradient (we’re interpolating between two different linear-gradient()s)
• The box’s border radius (the box becomes a circle and then again a box)
• The scroll distance value at the bottom of the screen

Element scroll

You can make an element in a webpage scrollable and follow that element’s scroll position.

Element position

There’s a third way to use useScroll(): Elements can track where they are in the browser’s viewport.

Here each picture’s position is used to change its size, opacity, and blur.

Plus, the name of each Buenos Aires barrio has its own effects: its x-position, opacity, and text shadow change.

Animating a Scroll component

Here we’re animating a Scroll with different transition settings:

• Animating to the top with a duration of 1 second.
• Animating to 200 using a ‘default spring’ with some extra stiffness.
• Scrolling to 400 with a ‘duration-based spring’.
• And to 600 with a custom Bézier curve.

Animating a Page component

Remember that earlier example? Here’s what happens when you animate its contentOffsetX (with some extra added bounciness).

You usually create a Motion value with useMotionValue(), but you can also use useSpring(), and then it will be… springy.

Here ‘Rotate’ uses the default useSpring() settings, and ‘Scale’ got some extra stiffness.

You can use the same useSpring() hook to transform a standard Motion value into a bouncier one.

Here, ‘Rotate’ and ‘Scale’ are first converted to horizontal position animations and then made bouncier.

Here layout animations are combined with a common background animation.

Simply adding the div with the bigger picture makes it grow automatically from the thumbnail’s position—while the thumbnail is temporarily hidden.

With the <LayoutGroup> component, you can sync layout animations across a set of elements.

Here’s an example without a layout group: When you tap an element, its siblings will not animate to their new position, and their parent also doesn’t animate to a new size.

The <LayoutGroup> wrapper component tracks the layout changes of all elements and has them animate together.

All the boxes now animate to their new position, and their parent also resizes fluidly.

Only routing

Here’s a version with React Router but without animation.

Try the example; you’ll see that each page has its own URL.

With Animate Presence animations

With Animate Presence, you can add animations between the pages.

Basic version

First, we make a basic version that merely displays the SVG.

Custom color option

And then a version that lets you change the color of the SVG with some CSS trickery.

Selecting a custom color with the component’s property controls.

All the settings

With some more code, you can set possible drag directions, keep the draggable frame in an area, or tweak the inertia animation that starts when you release it. We look at all the possible settings.

Snap to grid

Dynamically change the endpoint of the inertia animation to make the frame always move to one of the points on a grid.

Snap to corner

With the onDragEnd() event, you can animate the frame to the nearest corner when it’s released (or the corner you threw it to).

Drag controls

You can control a draggable element with the useDragControls() hook.

You can tap anywhere on the background (which uses this hook) to start dragging.

… and you can also use drag controls to create a trackpad in a space game.