Как сделать такую анимацию?

Question

[Alibek Kulseitov]

Мне нужно реализовать такую же анимацию появления волны снизу. Как тут https://slides.com
У меня почти похожий слой свг. Я смотрел код но так и не смог понять как оно реализовано плавное появление каждого слоя снизу.
У меня будет вот такая,белая волна снизу.

Answer 1

[Aleksey Solovyev]

У Вас есть путь из точек(svg path). На примере 1 из линий с сайта https://slides.com

<path class="path-2" d="M0,400 L 1000,400 1000,445 S 500,420 0,480 Z" fill="#2b81bf"></path>

Это конечное состояние точек. Вот это начальное:

<path class="path-2" d="M0,400 L 1000,400 1000,500 S 500,500 0,500 Z" fill="#2b81bf"></path>

Теперь по событию page load анимируйте атрибут d из начального состояния в конечное.
Можно делать через requestAnimationFrame(), если позволяют знания. На каждом шаге добавлять N к координате точки.

let i = 0;
(function loop() {
  i++;
  path.setAttribute('d', `M0,400 L 1000,400 1000,445 S ${i},420 0,480 Z`);
  if (i === 500) return
  window.requestAnimationFrame(loop);
})();

Что-то такое. Примеров в интернете куча: https://medium.com/@bdc/gain-motion-superpowers-wi...

Или используйте библиотеки, которые позволяют это делать более простым способом:

1. AnimeJS
   
2. greensock
   
3. SnapSvg
   
4. ...
   

update:
https://youtu.be/qtZ_ISUOzhI в свое время понравилось объяснение от этого парня. На видео он делает другую трансформацию, но идея точно такая же. Просто изменить под Ваши нужды.