1.0.5 • Published 3 years ago
@play-when-visible/framer-motion v1.0.5
@play-when-visible/framer-motion
An npm package for playing Framer Motion animations when they become visible in the viewport.
Features
- 🛠 Typescript Support
- ⚙ Highly Configurable
- 🙂 Easy to Use
Installation
Install the package via your favorite package manager.
npm install @play-when-visible/framer-motion
or
yarn add @play-when-visible/framer-motion
Make sure to also have framer-motion included in your project.
npm install framer-motion
or
yarn add framer-motion
Usage
@play-when-visible/framer-motion
provides the PlayWhenVisible
component, which handles the animation setup through a child function. The child function has an takes in an object that contains a function called setupAnimationProps
, which is used to create the props for the motion
JSX tag. The PlayWhenVisible
component is used as follows...
import React from "react";
import { motion } from "framer-motion";
import { PlayWhenVisible } from "@play-when-visible/framer-motion";
const Page = () => {
return (
<PlayWhenVisible>
// Define the child function
{({ setupAnimationProps }) => (
// Define your motion tag
<motion.div
// Create the props
{...setupAnimationProps({
// Your animation variants
variants: { from: { opacity: 0 }, to: { opacity: 1 } },
})}
// Additional props
transition={{
delay: 1,
}}
>
<p>I am fading in!</p>
</motion.div>
)}
</PlayWhenVisible>
);
};
API
PlayWhenVisible
The React component that handles the animation. It requires the child function: ({ setupAnimationProps }) => (...Your JSX here)
.
PlayWhenVisible Props
Prop | Default Value | Description |
---|---|---|
onlyOnce | false | If true, the animation plays only once. |
sensorOptions | undefined | The props for the VisibilitySensor from react-visibility-sensor , excluding partialVisibility and onChange . Read more in the react-visibility-sensor props documentation. |
requireFullVisibility | false | If true, requires that the animation children are fully visible before playing the animation. (Equivalent to partialVisibility from the VisibilitySensor props) |
onVisibilityChange | undefined | Callback for when the visibility of the animation is changed. (Equivalent to onChange from the VisibilitySensor props) |