framer-animate-on-view

> A simple wrapper to Animate React components on View.

Demo

CodeSandbox

• AnimateOnView component should be wrapped to make that component animate
• Default object can be imported for simple view animation.
• Primarily intersection observer concept is used.
• Totally safe and secure.

Table of contents

• Install
• Usage examples
  • Simple
• Props for customisation
• Authors
• Refer

Install

node.js:

npm install framer-animate-on-view --save

(Note : If this fails somehow try with npm install animatore-on-view-2 --legacy-peer-deps) (Will not fail if you have react 18)

Usage examples

Refer this for example App : Example app with code

Simple

// Import Module

import { AnimateOnView } from "framer-animate-on-view";

//Component
export default function App() {
  return (
    <div>
      <AnimateOnView tagName="h1">
        Hey, I will Animate on view
      </AnimateOnView>{" "}
      // This component will animate on view
    </div>
  );
}

Props for customisation

Options

Provide these as props on the <AnimateOnView/> component.

| Name | Type | Default | Required | Description | | ---------------- | ----------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | | tagName | String | None | true | This will make AnimateOnView component to make the tag based container. For example div,h1,h2, etc. | | threshold | number | 0 | false | Number between 0 and 1 indicating the percentage that should be visible before triggering. Based on react intersection observer | | triggerOnce | boolean | false | false | To trigger animation once only not on every view. True for once. | | tabIndex | number | undefined | false | tabIndex property for accessibility. | | variants | object | Default Animation | true | Object with hidden and visible which animates from hidden to visible props. | | className | className | false | false | Class for adding styles. | | onHoverStart | Function | false | false | Function to track hover start. | | onHoverEnd | Function | false | false | Function to track hover end. | | styles | object | false | false | Inline Styles for container. |

Authors

• Siddharth Varangaonkar github/sidv1905

Made this component while designing my portfolio. Made more component for reusablitity. As animaton on view in react requires lot of configs, installations. Made this simple component with minimal props.

Refer

• Framer motion here i.e Only variants object to customise animations more.