Apply animate.css update

[bhawanishiv]

I found that the library is still using older version of animate.css. I would like to add newer version support here.

[omnibrain]

Do you know the last working animate.css version?

[I-am-abdulazeez]

version: 4.1.1

[oxypomme]

It's because in v4.1.1 of animate.css, all the class names are prefixed by animate__.

If anyone is searching for a workaround, I've created a component who "upgrade" class names (it still apply class animate tho, and it don't work with custom transitions).

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

function Animated({
	children,
        animateIn,
	animateOut,
	...props
}) {
	return (
		<ScrollAnimation
			{...props}
			className={`animate__animated ${className ?? ""}`}
			animateIn={animateIn && `animate__${animateIn}`}
                        animateOut={animateOut &&`animate__${animateOut}`}
		>
			{children}
		</ScrollAnimation>
	);
}

export default Animated;

[dannysze]

It is because animate.css is updated. However, it would be cleaner to animate.compat.css instead of adding animate__ prefix for each animation.

import "animate.css/animate.compat.css";