metinarslanturk / react-animation-on-scroll Goto Github PK

A react library to animate elements on scroll. It has integration with animate.css. Supports typescript and server side rendering

License: MIT License

JavaScript 5.17% TypeScript 94.83%

react-animation-on-scroll's People

Contributors

Stargazers

Watchers

Forkers

badalchangba andrewcemil lol123a10-bebug paulhaze sulley93 marshalsebastine huazhuangnan melihozyurt victoprincipe kokanjankovic mixartemev

react-animation-on-scroll's Issues

Add support for compatibility with OverlayScrollbars?

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 :)

Put an anchor option

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

Doesn't work in Next.js

I installed the anime.css package and imported the CSS package to the file but it doesn't work, it stays hidden and does not reveal.
Next.js

Animation after content update?

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?

Usage with Nextjs

Do you have any examples of this package being used with Nextjs? I'm coming across a window is not defined error.

TypeError hitting a lot of my users

Allow offset to have separate configuration for AnimateIn and AnimateOut

It would be helpful if we could have separate offset amounts for animateIn and animateOut - mostly when using sticky navbar.

"animate__fadeInRightBig" makes the mobile screen too wide

"animate__fadeInRightBig" seems to make the website too big when triggered on on mobile view. I don't know if it's a problem on my end but other animations work fine.

Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'clientHeight')

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 on load not animating

Elements located in viewport on page load not animating untill scroll even with animatePreScroll = true

Add an "as" prop to customize the returned element

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?