Framer-animate-on-view NPM

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.

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.

framer-animate-on-view framer-animate-on-view-react framer-animate-on-view-react-library react animate framer-animate framer-motion animate-on-view

@infinitebrahmanuniverse/nolb-fram @everything-registry/sub-chunk-1700

1.0.0

2 years ago

framer-animate-on-view v1.0.0