@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) |