Search results for ‘onTap()’

Animation

The Reorder Components

These two components, both included in Reorder, let you create a drag-to-reorder list, which can be vertical or horizontal. You can also add and remove items and make only part of each item draggable. 📘 The Framer book – 🔀 Reorder Components open in Framer  The basics Reorder.Group Reorder.Item <ul> or <ol> No list style […]

To access this page, you must purchase The Framer book.


Animation

The useAnimate() Hook

With useAnimate(), you can manually start and stop animations and create a sequence of different animations. This new hook will soon replace useAnimationControls() because this one works with all HTML and SVG elements, not only Motion elements. 📘 The Framer book – 💫 J: useAnimate() open in Framer  Animate an element Return after drag How […]

To access this page, you must purchase The Framer book.


Code Components > Importing Other Layers, Components, and Packages

NPM Examples: Design System Components

Here are some examples of Instant NPM imports. I found three open-source design systems whose components can be imported and reused inside Framer. MUI A few Buttons Making a component Motion-compatible The code override Rating Radio buttons Slider The code override Chakra UI Button Adding the <ChakraProvider> On the canvas In the preview Motion-compatible Button […]

To access this page, you must purchase The Framer book.


Code Overrides

Overriding Code Components

With an override, you can dynamically change a code component’s properties, and by overriding its events, you can have it talk to other layers on the canvas. Which properties can you override?HandoffEvents Testing for events First example: Framer’s Toggle plus Ticker Making a component readable by Handoff Toggle Slider Why do they react to onTap() and onClick()? Making […]

To access this page, you must purchase The Framer book.


Code Overrides

Overriding Canvas Components

You can override a canvas component’s variables, make it animate between variants, and use events to let it talk to other layers on the canvas. Changing the current variant Changing variables Can you override other properties? CSS style properties Framer Motion animation properties Overriding events Event variables Native browser events Events example How are the […]

To access this page, you must purchase The Framer book.


Animation

API Overview

All the Framer Motion properties, events, and utilities. Here’s an overview of the Framer Motion API properties, user events, extra components, and utility functions,… with links to where they’re explained or used in the book. The Framer Motion 3D integration with React Three Fiber is not yet included. For a demo of the visual and […]


Framer Motion > Layout ID

Adding a New Element

In the previous examples we swapped elements that had the same Layout ID. One element was always removed the moment another was added. But you can also add an element without removing its namesake. Adding an element with the same layoutId as an existing one will start an animation from the old element to the […]

To access this page, you must purchase The Framer book.


Code Components > Property Controls

Event Handler

Layers on the canvas have a connector that signals they have events to trigger an interaction (often used to transition to another screen). With the event handler property control, you can add the same type of events to a code component. K1_Event_handler.tsx Here’s the above button. It has label and tint properties, and also an […]

To access this page, you must purchase The Framer book.


Archive

Overriding Code Components

With an override, you can dynamically change a code component’s properties, and by overriding its events, you can have it talk to other elements on the canvas.   open in Framer Web Public packages These examples use components from different public packages (of the legacy kind ) that are not available in newly created Framer […]


Code Overrides

Basic Overrides

Some overrides with animation basics, how to add ‘state’, and how to animate between two animation states. 1. Animating the background color 2. Simply changing the background color Extracting style from the props Frames had top-level properties 3. Animating when tapped (adding state) Adding an event Wrapping the function call Optional: adding an event handler […]

To access this page, you must purchase The Framer book.