I'm currently experimenting with incorporating animate.css into my React/Next.js project. While I can easily create animations using animate.css's inline class names, I'm facing challenges in calling animate.css's keyframe animations from my scss file. I came across a tutorial on YouTube that demonstrates this, but the difference lies in the fact that I am working with Next.js.
For reference:
https://www.youtube.com/watch?v=ESHaail1eGc&t=4379s&ab_channel=CodewithSloba
The tutorial importer the animate.css file at 3:55 and successfully applied the bounceIn animation from animate.css at 38:31.
Example:
In my styles/globals.scss file, I imported animate.css
@import 'animate.css'
In my AnimateLetters.tsx file, I first import the scss module,
import styles from '../../styles/AnimatedLetters.module.scss'
Within the same file, inside the React component,
This approach works for me:
<span className='animate__animated animated__bounceIn'> H </span>
However, this method does not work:
<span className={styles.animateText}> H </span>
In my AnimatedLetters.module.scss, the styling is defined as:
.animateText {
display: inline-block;
animation-name: bounceIn;
animation-duration: 2s
}
To overcome this issue, one way is to locate the keyframe within the
node_modules/animate.css/animate.css@keyframes bounceIn {
from,
20%,
40%,
60%,
80%,
to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
...
}
I would prefer to avoid this workaround if possible. Additionally, if I were to proceed with this option, would it be better to uninstall animate.css altogether and simply paste the necessary keyframes into my global.scss?