CODEWITHSUNDEEP
htmlcss
RRR uzumaki
RRR uzumaki

Reputation: 1328

Transition of wave animation in css from left to right

Hi guys I am trying to make a wave animation in css by using an svg here, most of thing works fine but i do have one issue, once the waves reaches the end point, it starts over again all of a sudden and that difference is clearly visible, I want to make the transition smooth for better ui so that to user the wave seems to be endless.

Please check snippet below to understand my problem Thanks

.wave {
  background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
  position: absolute;
  opacity:0.2;
  bottom: 0px;
  width: 2000px;
  height: 198px;
  animation: wave 2s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1000px;
  }
}
<div class="wave"></div>

Upvotes: 4

Views: 4776

Answers (3)

griv
griv

Reputation: 2245

As pointed out above, the best approach is to adjust the SVG file directly to have matching starting and ending points.

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1920px;
  }
}

.wave {
  background: url("https://raw.githubusercontent.com/scottgriv/River-Charts/main/static/assets/wave.svg") repeat-x;
  position: absolute;
  bottom: 0;
  width: 3840px;
  height: 198px;
  opacity: 1;
  animation: wave 4s linear infinite;
  transform: translate3d(0, 0, 0);
}
<div class="wave"></div>

To adjust the starting and ending points in your SVG path, open the SVG file in a code editor to see the XML. You can modify the d attribute of the <path> element.

Example:

Your Original SVG:

<path d="M0,0 C135.180854,0 182.771453,50 352.112272,50 C476.394096,50 557.790605,19.606846 751.782984,19.606846 C945.775364,19.606846 984.663736,50 1111.36509,50 C1375.56035,50 1635.95781,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="nonzero"></path>

Modified SVG (with simplified adjustments):

<path d="M0,0 C240,0 240,50 480,50 C720,50 720,0 960,0 C1200,0 1200,50 1440,50 C1680,50 1680,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="evenodd"></path>

  • The original SVG had multiple control points (C commands) to define curves in the path. In the modified SVG, I simplified these curves by adjusting the coordinates of the control points while keeping the same number of control points.

  • I also changed the fill-rule attribute from "nonzero" to "evenodd". This determines how the path fills in case it overlaps itself.

  • Feel free to change the fill color too by adjusting the fill attribute of the <path> element.

Full Modified SVG XML:

<svg width="1920px" height="200px" viewBox="0 0 1920 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>2/1@svg</title>
    <g id="2/1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M0,0 C240,0 240,50 480,50 C720,50 720,0 960,0 C1200,0 1200,50 1440,50 C1680,50 1680,0 1920,0 L1920,200 L0,200 L0,0 Z" id="Rectangle" fill="#D8F5EA" fill-rule="evenodd"></path>
    </g>
</svg>

Upvotes: 0

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

This may solve your problem

As you can see in the image, that the height of the Start point and the End point are the same.

So I have increased the width of the wave div to the double of the image. and moved div to the very end point of the image which is 1920px to remove the fluctuation.

body{overflow:hidden;}
.wave {
  background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
  position: absolute;
  opacity:0.2;
  bottom: 0px;
  width: 3840px;
  height: 198px;
  animation: wave 4s linear infinite;
  transform: translate3d(0, 0, 0);
  
}

@keyframes wave {
  0% {
    margin-left: 0;
  }
  100% {
    margin-left: -1920px;
  }
}
<div class="wave"></div>

Upvotes: 5

Sunny Vaghadia
Sunny Vaghadia

Reputation: 583

This logic will work. But, you have to work on the SVG to match the starting point and ending points.

.wave {
  background: url(https://gist.githubusercontent.com/ratnabh/da8213a27700e0e1c2d1c81961070f6f/raw/3608a5072f4e392b852e5cc3c244841025b32c81/wave1.svg) repeat-x; 
  position: absolute;
  opacity:0.2;
  bottom: 0px;
  width: 2000px;
  height: 198px;
  animation: wave 2s cubic-bezier( 0.36, 0.36, 0.36, 0.36) infinite;
  transform: translate3d(0, 0, 0);
}

@keyframes wave {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 5000% 0; 
  }
}
<div class="wave"></div>

Upvotes: 3

Related Questions