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 'animate__animated animate__fadeIn', 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>