Search

Search results for “onTap”

Search results for “onTap”

Reorder

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 basics Here’s a simple example: K1 – Reorder – Example with <ul> open in CodeSandbox You import the Reorder component […]

To access this page, you must purchase The Mighty Motion Guide.

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 on this website. The Framer Motion 3D integration with React Three Fiber is not yet included. For a

Animatable Properties

You can animate most visual and layout CSS properties with Framer Motion. The project below contains example animations for the most important properties. These are all simple motion divs which I gave a whileTap. 📋 Animatable Properties open in CodeSandbox Overview table Here’s an overview of the CSS properties you can animate, and few extra […]

To access this page, you must purchase The Mighty Motion Guide.

Animating SVG Path Changes

You can morph the shape of an SVG path; when you take some limitations into account. There’s an easier way On this page, I explain how to change the shape of an SVG <path> by directly changing its d property. But… there’s an easier way: You can use a library like Flubber to animate between […]

To access this page, you must purchase The Mighty Motion Guide.

The useAnimationControls() hook

From the Docs: useAnimate() is now the preferred way to manually trigger animations. It works with any HTML/SVG element, not just motion components. It also offers powerful playback controls. Basic use Some hooks, like useState() and useCycle(), give you two things: a value and a function. This one, useAnimationControls(), returns only one thing: an AnimationControls […]

To access this page, you must purchase The Mighty Motion Guide.

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. Animate an element Return after drag Here’s an example of a draggable div that will always return to […]

To access this page, you must purchase The Mighty Motion Guide.

Animating Motion Values

You can animate any Motion value to a new value with the animate() function, and whatever you attached the Motion value to will follow along nicely. Introduction It was always possible to change a Motion value with set(), but with animate() (added in Framer Motion 2.8), you can also animate to a new value. set(), […]

To access this page, you must purchase The Mighty Motion Guide.

Chaining and Transforming Motion Values

Framer Motion’s useTransform() hook lets you transform one Motion value to a new one, so it’s handy for following a scroll or drag movement. The value it returns doesn’t even have to be numeric. Colors, shadows, gradients, etc., are also possible. The useTransform() hook This hook will accept any Motion value created with useMotionValue(), but […]

To access this page, you must purchase The Mighty Motion Guide.

Motion Values

Everything about the values that drive all animations in Framer Motion. What is a Motion value? Framer Motion internally uses Motion values for all its animations. Because they live outside React’s render cycle, Framer Motion can start and stop animations without the need for components (or elements with code overrides) to reload. Motion values work […]

To access this page, you must purchase The Mighty Motion Guide.

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 Mighty Motion Guide.

Scroll to Top