metinarslanturk / react-animation-on-scroll Goto Github PK
View Code? Open in Web Editor NEWA react library to animate elements on scroll. It has integration with animate.css. Supports typescript and server side rendering
License: MIT License
A react library to animate elements on scroll. It has integration with animate.css. Supports typescript and server side rendering
License: MIT License
I'm using OverlayScrollbars (https://www.npmjs.com/package/overlayscrollbars-react) within my project to replace the scrollbar with an overlay rather than relying on the browser's built in scrollbars to prevent the page content 'shifting' when moving between pages that do/do not have overflow content.
Unfortunately, I assume due to how OverlayScrollbar works, it prevents this module from working. I have tested within Chrome Dev Tools that when I remove the classes applied to <html>
and <body>
etc by OverlayScrollbars, and remove overflow: hidden
from ths styling, it returns the browser's normal scrollbar, and this module then works perfectly.
With OverlayScrollbars enabled, any items that load within the viewport shown when the page first loads (i.e. the top of the page before you do any scrolling), work perfectly and animate in - however when you scroll down, none of the other components detect the viewport change and animate in, and the first component doesn't animate out (again, I assume it can't detect the viewport change).
Do you think you'd be able to build in compatability with OverlayScrollbars at all? Your module is about the only actively maintained Animation On Scroll I can find for React, and I'd love to be able to use it!
Thanks :)
I think that it will be nice to have an anchor option, accepting css selector (e.g. #myApp), that will animati when the anchor element reach the offset. This will allow to do "group animations" in sequence
First of all thank you for creating a awesome library.
I'm trying to animate text which is delivered through a API. Usually this has a small delay.
In the example below, the content is displayed instantly however I would like to animate it as soon as the content is ready.
import React from 'react';
import { AnimationOnScroll as AOS } from 'react-animation-on-scroll';
export default class App extends React.Component {
constructor (props: any) {
super(props);
this.state = {
content: ""
}
}
componentDidMount () {
setTimeout (() => {
this.setState({ content: "Hello world!" });
}, 5000);
}
render () {
const { content } = this.state;
return (
<AOS animateIn="animate__fadeInDown" duration={1} initiallyVisible>
<h1>{content}</h1>
</AOS>
);
}
}
I tried using the flag initiallyVisible
as you suggest this should be set with server side rendering. However the results were the same.
Changing the timeout from 5000
to 0
shows the animation properly.
Is there any way to achieve this?
Do you have any examples of this package being used with Nextjs? I'm coming across a window is not defined error.
It would be helpful if we could have separate offset
amounts for animateIn
and animateOut
- mostly when using sticky navbar.
I'm using this library in my NextJS project
Then I got this error:
Unhandled Runtime Error
TypeError: Cannot read properties of null (reading 'clientHeight')
Call Stack
eval
node_modules/react-animation-on-scroll/dist/esm/components/AnimationOnScroll.js (94:0)
eval
node_modules/react-animation-on-scroll/dist/esm/components/AnimationOnScroll.js (155:0)
eval
node_modules/react-animation-on-scroll/dist/esm/components/AnimationOnScroll.js (177:0)
invokeFunc
node_modules/lodash.throttle/index.js (160:0)
leading-edge
node_modules/lodash.throttle/index.js (170:0)
debounced
node_modules/lodash.throttle/index.js (235:0)
Any idea?
Elements located in viewport on page load not animating untill scroll even with animatePreScroll = true
Thanks for building this!
What do you think about being able to customize the returned element via something like an as
prop?
I want to use this package within unordered lists to stagger the display of the list items, but wrapping the list items in the package's returned <div>
creates invalid HTML.
I was thinking an as
prop would be nice so you could maintain the proper markup in this situation.
Example:
<AnimationOnScroll
animateIn="animate__fadeIn"
as="li"
duration={2}
delay={index * 1000}
animateOnce
>
You then add the as
prop to the component:
as: Component
Default it to "div"
:
as = "div"
and then you change the component's return value to:
<Component
ref={node}
className={classNameProps ? `${classNameProps} ${classes}` : classes}
style={Object.assign({}, style, styleProps)}
>
{children}
</Component>
What do you think?
Is it possible to prevent the animation if the elements will be visible without scrolling? (i.e. "above the fold")
I have horizontal scrolling page. width 100% and height 100vh. Animation work once on page first loading. and div which is not in viewport also load before I scroll to them.
How to fix it?
It looks like this package requires prop-types, but doesn't define it in the package.json file. This causes errors if you try to install it into a project that doesn't already have prop-types.
You can see the import here: https://github.com/MetinArslanturk/react-animation-on-scroll/blob/main/dist/esm/components/AnimationOnScroll.js#L1.
If the element is already in the viewport at first, the animation will not be triggered. Setting 'animatePreScroll' to true doesn't help. Can you check it?
I tried it in a newly built react project with react 18.2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.