Как сделать анимацию при переходе на другую страницу?

Question

[Pit]

Всем привет! Помогите сделать анимацию при переходе страницы. Мне нужно оформить вот такую анимацию https://tympanus.net/Tutorials/PageRevealEffects/ Имя анимации в выпадающем селекте simple, данная анимация здесь работает без перехода на другую страницу, а мне нужно как-то его оформить при переходе. Получается до перехода должна быть анимация что блок справа выезжает влево, а после загрузки страница тот-же блок уже уезжаешь влево и открывает весь сайт. Может кто знает какие-то плагины или решения подскажите.

Comments

[Rustam Bainazarov]

Я, конечно я всё понимаю, но там аж целая статья, как прикрутить это счастье в ваш проект:
https://tympanus.net/codrops/2016/06/01/multi-laye...

[Just Me]

гугли Page Transitions. Это концепция загрузки контента без перезагрузки страницы. То, что показано по твоей ссылки это прелоадер к ней. Или используй библиотеку типа barba.js, как тебе уже написали. в react и vue, page transitions встроен по умолчанию

[Pit]

Рустам Байназаров, вы не поняли, там сделанная анимация без перехода на другую страницу, а мне нужно чтобы для перехода на другую страницу был эффект, а там просто 2 блока уже на странице просто между собой листаються

[Pit]

Just Me, я не могу разобраться как подключить barba js, структуру вроде подключил в html а в js вообще ничего не пойму.

Answer 1

[Froggyweb]

есть barba.js скорее всего есть другие решения, но это очень неплохое, в мире реакт вью и пр. свои правила

Answer 2

[Арсений Матыцин]

Ты никогда не сведешь анимацию при перезагрузке страницы. Поэтому, чтобы она была плавной, тебе необходимо либо на Vanilla.js сделать реализацию без перезагрузки, т.е. в рамках одной страницы, либо использовать js-фреймворк типа Vue, React, Angular + анимация переходов между состояниями.

Впрочем, у тебя прямо перед носом сырцы, которые ты можешь скачать и разобрать.