![]() Receives the visibility of the element at time of execution. 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.Ĭallback function to run once the animateIn animation has completed. Its probably best to avoid manually setting animationDuration or opacity as the component will modify those attributes.īy default the code checks to see if the element is visible within the window. Whether the element should only animate once or not.Ī style object can be assigned to any ScrollAnimation component and will be passed to the rendered dom element. How long to delay the animation for (in milliseconds) once it enters or leaves the view. Whether the element should be visible to begin with or not. The Animation triggers when the element is leaving the "viewport" (see offset property for more details on this). The Animation triggers when the element enters the "viewport" (see offset property for more details on this).Īny css animation defined against a class, be it from animate.css or an animation that you have created yourself. ![]() This size of the "viewport" can be overridden by setting the offset property.Īny css animation defined against a class, be it from animate.css or an animation that you have created yourself. When no part of the element is in the "viewport", animateOut is triggered. When part of an element is within the "viewport", animateIn is triggered. The "viewport" is by default 150 pixels from the top and bottom of the screen. Most Simple Use: import ScrollAnimation from 'react-animate-on-scroll' Or by simply including a link to the file hosted by CDNJS: This can be done in a number of ways, eg: npm install -save animate.cssĪnd then importing in your project: import "animate.css/" If you want to use the animations from animate.css, be sure to include animate.css in someway in your project Inspired by React-Scroll-Effect Demo Install: npm install react-animate-on-scroll -save React component to animate elements on scroll with animate.css.
0 Comments
Leave a Reply. |