Components not visible

[jmebradl23]

Attempted to do a simple test:

import React from 'react';
import ScrollAnimation from 'react-animate-on-scroll';
import "animate.css/animate.min.css";

const App = () => {
    return (
        <div>
            <ScrollAnimation animateIn='fadeIn'>
                <h1>animateIn</h1>
            </ScrollAnimation>
        </div>
    )
  }

export default App;

But the component isn't showing up on the page on scroll. Element is in the DOM but animation is not getting triggered. Only thing I see in the console is: "[HMR] Waiting for update signal from WDS..."

Any ideas?

[ZAkamboh]

Same issue with me

[CamzBarber]

Try change the animateIn to 'animateanimated animatefadeIn', like so: <ScrollAnimation animateIn='animate__animated animate__fadeIn'>

[williamgravel]

As of animate.css v4.0.0, CSS classes for animations are all prefixed with animate__ to avoid class clashes. Simply replace animateIn="fadeInLeft" with animateIn="animate__fadeInLeft" to fix this issue.

[quentin-pla]

Try to add "#root" as parent selector like this : <ScrollAnimation animateIn='animate__animated animate__fadeInUp' scrollableParentSelector='#root'> <h1>Hello</h1> </ScrollAnimation>