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:

1npm 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

1// Import Module
2
3import { AnimateOnView } from "framer-animate-on-view";
4
5//Component
6export default function App() {
7  return (
8    <div>
9      <AnimateOnView tagName="h1">
10        Hey, I will Animate on view
11      </AnimateOnView>{" "}
12      // This component will animate on view
13    </div>
14  );
15}

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.