@articulate/react-animate-on-scroll
Advanced tools
React component to animate elements on scroll with animate.css
NOTE: This is a fork of the original react-animate-on-scroll by dbramwell and has been modified to meet articulate's needs.
React component to animate elements on scroll with animate.css. Inspired by React-Scroll-Effect
npm install articulate-react-animate-on-scroll --save
If you want to use the animations from animate.css, be sure to include animate.css in someway in your project This can be done in a number of ways, eg:
npm install --save animate.css
and then importing in your project:
import "animate.css/animate.min.css";
Or by simply including a link to the file hosted by CDNJS:
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>
import ScrollAnimation from 'react-animate-on-scroll';
<ScrollAnimation animateIn="fadeIn">
Some Text
</ScrollAnimation>
offset - default 150
The "viewport" is by default 150 pixels from the top and bottom of the screen. When part of an element is within the "viewport", animateIn is triggered. When no part of the element is in the "viewport", animateOut is triggered. This size of the "viewport" can be overridden by setting the offset property.
animateIn
Any css animation defined against a class, be it from animate.css or an animation that you have created yourself. The Animation triggers when the element enters the "viewport" (see offset property for more details on this).
animateOut
Any css animation defined against a class, be it from animate.css or an animation that you have created yourself. The Animation triggers when the element is leaving the "viewport" (see offset property for more details on this).
duration - default 1
Animation duration in seconds.
initiallyVisible - default false
Whether the element should be visible to begin with or not.
delay - default 0
How long to delay the animation for (in milliseconds) once it enters or leaves the view.
animateOnce - default false
Whether the element should only animate once or not.
style - default {}
A style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.
scrollableParentSelector
By default the code checks to see if the element is visible within the window. This can be changed to any other parent element of the ScrollAnimation by adding a css selector pointing to the parent that you wish to use.
afterAnimatedIn
Callback function to run once the animateIn animation has completed. Receives the visibility of the element at time of execution. Example:
function(visible) {
if (visible.inViewport) {
// Part of the element is in the viewport (the area defined by the offset property)
} else if (visible.onScreen) {
// Part of the element is visible on the screen
} else {
// Element is no longer visible
}
}
afterAnimatedOut
Callback function to run once the animateOut animation has completed. Receives the visibility of the element at time of execution. Example:
function(visible) {
if (visible.inViewport) {
// Part of the element is in the viewport (the area defined by the offset property)
} else if (visible.onScreen) {
// Part of the element is visible on the screen
} else {
// Element is no longer visible
}
}
keepStructure
This is a Boolean value that will not add additional structure to its children
to facilitate animation when set to true. This comes in handy when keeping the
structure required for proper semantic html.
In order to properly animate while keeping the structure, a few requirements must be met:
animateRef.When keepStructure is set to true, the component will check if it only has
one child, if it does it will not create the wrapping div and will instead
use the root element as the container. If there is more than one child, then
it will default to creating and inserting a div that will wrap the provided
children.
In the project root:
npm install
There are some automated test cases with karma and a Chrome headless browser. I attempted to use Jest, and then to use PhantomJS, but could get neither to work with scroll events. To run them:
npm test
gulp build
cd demo
npm install
npm install ..
npm start
FAQs
React component to animate elements on scroll with animate.css
The npm package @articulate/react-animate-on-scroll receives a total of 7 weekly downloads. As such, @articulate/react-animate-on-scroll popularity was classified as not popular.
We found that @articulate/react-animate-on-scroll demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 53 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security Fundamentals
Attackers use obfuscation to hide malware in open source packages. Learn how to spot these techniques across npm, PyPI, Maven, and more.
Security News
Join Socket for exclusive networking events, rooftop gatherings, and one-on-one meetings during BSidesSF and RSA 2025 in San Francisco.
Security News
Biome's v2.0 beta introduces custom plugins, domain-specific linting, and type-aware rules while laying groundwork for HTML support and embedded language features in 2025.