Какими средствами можно реализовать такую анимацию?

Question

[Leha Lepeha]

Как можно сделать такую анимацию? Я слышал, что с помощью react, но я только недавно начал изучать его, поэтому не знаю как.

Comments

[Leha Lepeha]

https://www.instagram.com/p/BuO8zd_nHHK/?utm_sourc...

[Leha Lepeha]

Ссылка в вопросе не вставилась

[Lord_Dantes]

Может это видео,а не анимация?

[Leha Lepeha]

Slave, я имею ввиду анимацию как на этом видео, это же слайдер, как сделать такие переходы?

[ian14]

Leha Lepeha, сделать слайдер и использовать WOW.js для блоков внутри

[Lord_Dantes]

Leha Lepeha, можно попробовать поискать анимированные переходи с открытим кодом. Я ищу обычно на codepen.io.
И дальше уже попробовать под себя кастомизировать.

[Leha Lepeha]

ian14, Slave, спасибо

Answer 1

[profesor08]

Конкретно этот вариант будет делаться следующим образом (в кратце):
1. Извлекутся все анимации из After Effects с помощью bodymovin
2. В проект подключится lottie-web
3. В lottie-web передадутся данные и будет сделана настройка.

В результате получится идентичная анимация на svg, точь в точь как в After Effects, но в браузере.

Почему так сложно? Да потому что вручную ты хрен добьешь такой же точности таймингов и кривых анимаций.

Answer 2

[Владимир Проскурин]

Так то это дизайн, верстки нет. Сам автор пишет, что использовал Photoshop и After Effects.
Но так то, анимация не очень сложная, обычные переходы.

Comments

[Leha Lepeha]

Простите, не корректно задал вопрос, я имел ввиду эти переходы(анимации) как на видео

[Владимир Проскурин]

Leha Lepeha, ну, это серьезная тема, которая начинается с обычных css transition, и заканчивается WebGL анимацией. Учите CSS анимацию (transition, keyframes), потом учите анимацию на JS с библиотеками (например GreenSock довольно мощный), потом по желанию, можно учить WebGL и Three.js

[Leha Lepeha]

Владимир Проскурин, спасибо

Answer 3

[Илья Севостьянов]

Для React советую использовать библиотеку react-spring
в режиме native используется requestAnimationFrame
и непосредственный render комопнета происходит только в начале и в конце анимации (она же выполняется средствами браузера)

• нет избыточных рендеров кмопнента
  
• анимация средствами браузера более производительная и не затрагивает поток исполнения JS
  

PS: на сайте библиотеки достаточно примеров для базовых потребностей анимировнаия.