AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

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

Мне нужно реализовать такую же анимацию появления волны снизу. Как тут https://slides.com
У меня почти похожий слой свг. Я смотрел код но так и не смог понять как оно реализовано плавное появление каждого слоя снизу.
У меня будет вот такая,белая волна снизу.
5c070084b19c1763009280.png
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
alsolovyev
@alsolovyev
У Вас есть путь из точек(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 в свое время понравилось объяснение от этого парня. На видео он делает другую трансформацию, но идея точно такая же. Просто изменить под Ваши нужды.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы