Search results for ‘onTap()’
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]
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 […]