Framer Motion Docs

Framer Motion is a powerful animation library for React / Remix that enables developers to create smooth, performant, and engaging animations with ease. Here, we'll explore three key features of Framer Motion: the useTransform hook, the useScroll hook, and layout animations. We'll dive into their capabilities, learn how to use them effectively, and showcase practical examples to demonstrate their potential.

useScroll Hook:

The useScroll hook in Framer Motion is used to create scroll-linked animations, such as progress indicators and parallax effects. It allows you to track the scroll position of the page or a specific element and create animations based on the scroll progress.

useScroll returns four motion values

• scrollX/Y: The absolute scroll position, in pixels.
• scrollXProgress/YProgress: The scroll position between the defined offsets, as a value between 0 and 1.

By default, useScroll tracks the page scroll. However, you can also track the scroll position of a specific element by passing a ref to the container option.

useTransform Hook:

Motion values in Framer Motion are special variables that track and animate values over time. They are used to create dynamic and interactive animations by linking them to component styles or other properties. Motion values can represent various types of data, such as numbers, colors, or complex strings like CSS transforms. They provide a declarative way to define animations and allow you to create smooth, performant transitions between different states. With motion values, you can easily compose and manipulate animations using powerful utility functions like useTransform, making it effortless to create complex and engaging animations in your applications.

The useTransform hook in Framer Motion allows you to create a new motion value that transforms the output of one or more other motion values. It provides a flexible way to map and manipulate motion values based on specific ranges or custom functions.

With useTransform, you can

• Create a new motion value by transforming the output of existing motion values.
• Map a motion value from one range of values to another, enabling smooth transitions and interpolations.
• Apply easing functions to control the behavior of the transformation.
• Customize the mixing function to handle advanced scenarios, such as morphing SVG paths.

Example 1: ScrollToMoveElement

In this example, we use the useScroll and useTransform hooks to create an animation where an element moves along a path as the user scrolls the container. The element's position is transformed based on the scroll progress, creating an engaging and interactive experience.

Example 2: ScrollToChangeColor

This example demonstrates how to change the background color of an element based on the scroll progress of the container using the useScroll and useTransform hooks. As the user scrolls, the background color smoothly transitions from one color to another.

Example 3: ScrollToFadeOut

Here, we showcase how to fade out an element as the user scrolls the container using the useScroll and useTransform hooks. The opacity of the element is transformed based on the scroll progress, creating a smooth fading effect.

Example 4: ScrollToRotate

In this example, the useScroll and useTransform hooks are used to rotate an element as the user scrolls the container. The rotation angle is transformed based on the scroll progress, creating a visually engaging effect.

With the useTransform hook, you can create dynamic and responsive animations that adapt to changes in your motion values seamlessly.

Example 5: Element Scroll Progress

In this example, we create a scrollable container and track its scroll progress using useScroll with the container option set to the container ref. We then render a progress bar that is sticky to the top of the container and animates its scaleX based on the scroll progress within the container.

Example 6: Track Element Position

Here, we track the progress of an element within the container by passing its ref to the target option. Each item has its own progress indicator, showcasing how to track individual element positions.

Layout Animations

Framer Motion's layout animations simplify the process of animating CSS layouts. With layout animations, you can easily animate between different layouts using performant transforms.

To enable layout animations, you simply need to set the layout prop on a motion component. Any layout changes that occur as a result of re-renders will be automatically animated.

Example 7: LayoutOpenElement

This example demonstrates how to create an expanding and collapsing element using the layout prop and the LayoutGroup component. When clicked, the element expands to reveal additional content, and when clicked again, it collapses back to its original state.

Example 8: ExpandingGridItems

In this example, a grid of items is created where each item can expand and contract when clicked. The LayoutGroup component is used to coordinate the layout animations across multiple components, ensuring a seamless and visually appealing experience.

Example 9: Tabs

This example showcases how to create a tab component with smooth transitions between different tab contents using the layout prop and the LayoutGroup component. When a tab is selected, an underline animates to the selected tab, and the corresponding content is displayed.

Framer Motion intelligently handles the animation of layout changes, ensuring smooth and visually appealing transitions. It also provides options for scale correction to prevent distortion of child elements and customization of layout animations using the transition prop.

Additionally, layout animations can be coordinated across multiple components using the LayoutGroup component. This allows for synchronization of layout changes and enables shared layout animations, where components can seamlessly animate between each other based on matching layoutId props.

Framer Motion's useTransform and useScroll hooks and layout animations are powerful tools that empower developers to create dynamic, responsive, and visually stunning animations with ease. By employing useTransform, you can transform and map motion values to achieve smooth transitions and interpolations. Layout animations, on the other hand, simplify the process of animating between different layouts, providing a seamless and performant experience.

So, if you're building interactive user interfaces, creating engaging transitions, or animating complex layouts, Framer Motion's useTransform, useScroll, and layout animations have got you covered. So go ahead, unleash your creativity, and elevate your animations to new heights with Framer Motion!