I found this amazing animation that I'm trying to implement from this link.
After moving some of the animation code to Tailwind for a React Component, I noticed that it works perfectly in Storybook but fails to animate when running in next dev. It simply doesn't move at all.
Below is the code for the component:
import React from "react";
import "../../styles/WavesBackground.module.css";
export interface WavesBackgroundProps extends React.PropsWithChildren {}
export const WavesBackground: React.FC<WavesBackgroundProps> = () => {
return (
<div className="relative text-center bg-gradient-to-t from-lightgreen to-darkgreen m-0 p-0 w-full h-4/6">
<div>
<div className="m-0 p-0 w-full h-4/6 flex justify-center items-center text-center">
<h1 className="font-light tracking-wide text-5xl h-24"></h1>
</div>
<svg
className="waves relative w-full h-1/3 max-h-96 min-h-150px"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 24 150 28"
preserveAspectRatio="none"
shapeRendering="auto"
>
<defs>
<path
id="gentle-wave"
d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
/>
</defs>
<g className="parallax">
<use
xlinkHref="#gentle-wave"
x="48"
y="0"
fill="rgba(255,255,255,0.7"
/>
<use
xlinkHref="#gentle-wave"
x="48"
y="3"
fill="rgba(255,255,255,0.5)"
/>
<use
xlinkHref="#gentle-wave"
x="48"
y="5"
fill="rgba(255,255,255,0.3)"
/>
<use xlinkHref="#gentle-wave" x="48" y="7" fill="#fff" />
</g>
</svg>
</div>
</div>
);
};
The following is the plain CSS file associated with the component:
.waves {
position: relative;
width: 100%;
height: 20vh;
margin-bottom: -7px; /*Fix for safari gap*/
min-height: 100px;
max-height: 150px;
}
/* Animation */
.parallax > use {
animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.parallax > use:nth-child(1) {
animation-delay: -2s;
animation-duration: 7s;
}
.parallax > use:nth-child(2) {
animation-delay: -3s;
animation-duration: 10s;
}
.parallax > use:nth-child(3) {
animation-delay: -4s;
animation-duration: 13s;
}
.parallax > use:nth-child(4) {
animation-delay: -5s;
animation-duration: 20s;
}
@keyframes move-forever {
0% {
transform: translate3d(-90px, 0, 0);
}
100% {
transform: translate3d(85px, 0, 0);
}
}
/*Shrinking for mobile*/
@media (max-width: 768px) {
.waves {
height: 40px;
min-height: 40px;
}
.content {
height: 30vh;
}
}