Подскажите как реализовать эффект как на примере.

1. Сделать svg файл логотипа.
2. взять какую-то библиотеку для svg-анимаций. например https://maxwellito.github.io/vivus/ или воспользоваться примерами с https://animejs.com/
3. написать js, который будет реагировать на скроллинг окна браузера. и дальше проверять, если окно прокручено больше чем на N пикселей, то запускаем анимацию, которая сворачивает наш SVG в точку, иначе разворачиваем из точки логотип

Также можно сделать анимацию с помощью CSS

Вот тут описано как это делается: https://habr.com/ru/post/450924/

Спасибо большое. Сутки разбирался с советами, посмотрел кучу материала.
Не подскажите почему на мой SVG файл не накладывается анимация? С другими пробовал, вроде все ок. Вот код

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Слой_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 700 254" enable-background="new 0 0 700 254" xml:space="preserve">
<g>
	<path fill="#F2F2F2" d="M23.6,129.4c0-45.6,37.1-82.6,82.8-82.4c45.4,0.1,82.2,37.1,82.2,82.5c0,45.6-37.1,82.5-82.8,82.4
		C60.4,211.8,23.6,174.8,23.6,129.4z M106.2,182c28.8-0.1,52.4-23.6,52.4-52.5c0-28.8-23.5-52.4-52.4-52.5
		c-29.1,0-52.7,23.7-52.6,52.8C53.7,158.5,77.3,182,106.2,182z"/>
	<path fill="#F2F2F2" d="M215.7,30.1c10,0,19.5,0,29.8,0c0,2,0,3.9,0,5.8c0,31,0,62,0.1,92.9c0.1,30.3,24.2,53.8,54.3,53
		c29-0.7,51.8-25.6,50.6-55.3c-0.9-22-16.7-41.7-38.4-47.7c-1.7-0.5-3.5-0.9-5.3-1.4c0-9.9,0-19.7,0-29.8
		c10.5,0.6,20.1,3.8,29.1,8.5c31.8,16.4,48.9,50.5,43.6,86.8c-4.9,33.4-32.6,61.5-66.8,67.8c-49.8,9-96.5-29.2-97.1-79.8
		c-0.3-32.5-0.1-65-0.1-97.4C215.6,32.5,215.6,31.6,215.7,30.1z"/>
	<path fill="#F2F2F2" d="M516.7,30.1c10,0,19.5,0,29.8,0c0,2,0,3.9,0,5.8c0,31,0,62,0.1,92.9c0.1,30.3,24.1,53.8,54.3,53
		c29-0.7,51.8-25.6,50.6-55.3c-0.9-22-16.7-41.7-38.4-47.7c-1.7-0.5-3.5-0.9-5.4-1.4c0-9.9,0-19.7,0-29.8
		c10.5,0.6,20.1,3.8,29.1,8.5c31.8,16.4,48.9,50.5,43.6,86.8c-4.8,33.4-32.6,61.5-66.8,67.8c-49.8,9-96.5-29.2-97.1-79.8
		c-0.3-32.5-0.1-65-0.1-97.4C516.5,32.5,516.6,31.6,516.7,30.1z"/>
	<path fill="#F2F2F2" d="M489.3,47.6c0,10.5,0,20.1,0,29.8c-4.5,0.8-8.9,1.4-13.2,2.5c-22.6,6.1-38.5,26.7-38.6,50.1
		c-0.1,25.3-0.1,50.7-0.1,76c0,1.8,0,3.6,0,5.7c-10,0-19.6,0-29.7,0c-0.1-1.5-0.2-3.1-0.2-4.7c0-25.2-0.1-50.3,0-75.5
		c0.1-40.8,27.1-73.8,66.9-82C479.1,48.5,483.9,48.3,489.3,47.6z"/>
	<path fill="#000000" d="M188.5,226.5c0,8.1-6.6,14.5-14.7,14.4c-8-0.1-14.5-6.7-14.3-14.8c0.2-7.8,6.6-14.2,14.4-14.2
		C182,211.9,188.6,218.5,188.5,226.5z"/>
</g>
</svg>

для начала расскажите какой способ вы выбрали для анимаций?

ну и на вскидку дело обстоит так, что svg надо подключать не файлом, а встраивать как html тег, потому вот это точно надо убрать:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

ну и дальше к самой свг и её слоям идут обращения по css-селекторам. потому надо назначать классы и ид нужным слоям, ну и дать нормлальный ID для самой свгшки:

<svg version="1.1" id="svg_id" ...>

ну и для слоев:

<path fill="#F2F2F2" d="..." class="path_class"/>

или

<path fill="#F2F2F2" d="..." id="path_id1"/>
<path fill="#F2F2F2" d="..." id="path_id2"/>

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

Добрый день. Анимацию закончил, вот ссылка на кодпен https://codepen.io/Malleys/pen/KKdVRLj?editors=1000. Я так понял осталась 3 стадия. Не поможете с написанием скрипта или может где про скролл эффект подробнее прочитать.

js для скролла:

jQuery(window).scroll(function(){
  var scroll_top = jQuery(window).scrollTop();

  if( scroll_top > 100 ) {
    jQuery('#logo').removeClass('horizontal_logo');
    jQuery('#logo').addClass('vertical_logo');
  }
  else {
    jQuery('#logo').removeClass('verticlal_logo');
    jQuery('#logo').addClass('horizontal_logo');
  }
});

Дальше css. Ваш пример надо разбить на 2 части, так как логотип надо поворачивать в обратную сторону, то должна быть и обратная анимация:

#logo.vertical_logo {
  animation: move_vertical 3s linear forwards;
}
#logo.horizontal_logo {
  animation: move_horizontal 3s linear forwards;
  transform: translate(433px, 223px) scale(1) rotate(90deg);
}

@keyframes move_vertical {
  from {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  49.9% {
    transform: translate(105px, 328px) scale(0) rotate(0deg);
  }
  50% {
    transform: translate(105px, 328px) scale(0) rotate(90deg);
  }
  to {
    transform: translate(433px, 223px) scale(1) rotate(90deg);
  }
}

@keyframes move_horizontal {
  from {
    
    transform: translate(433px, 223px) scale(1) rotate(90deg);
  }
  49.9% {
    transform: translate(105px, 328px) scale(0) rotate(90deg);
  }
  50% {
    transform: translate(105px, 328px) scale(0) rotate(0deg);
  }
  to {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
}

Со временем и транслейтами там уже можно будет играть как угодно

Спасибо большое. А как правильно разбить на 2 части? Одним файлом или нет? Вот я сделал так, только он особо не работает.  https://codepen.io/arakobra/pen/pojedKm

там на кодпен нет скролла страницы. пример надо тестировать на страницах со скроллом.

при прокрутке более чем на 100px от верха сайта должен включится механизм поворота логотипа. ну и наоборот

Спасибо большое все получилось. Единственное, теперь такая проблема возникала: при загрузке страницы анимация автоматически запускается, вроде из-за этой строчки после else ( jQuery(“#logo”).addClass(“horizontal_logo”); . Подскажите пожалуйста как сделать чтобы анимация работала только при скроле вниз=вверх. Спасибо больше заранее.

условие:

jQuery(window).scroll(function(){

означает, что функция будет работать только при скролле окна браузера. Возможно у вас по умолчанию указан в HTML класс запускающий анимацию?

Вот мой html 

<?php

<svg id="logo"
	xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
	viewBox="-2000 0 4218.8 661.4" xml:space="preserve"
	image-rendering="auto" baseProfile="basic" overflow="hidden"
	version="1.1" x="0px" y="0px">

 
<g id="logo.vertical_logo" fill="#fff">
	<path d="M117.6,1.7c45.6,0,82.6,37.1,82.4,82.8c-0.1,45.4-37.1,82.2-82.5,82.2c-45.6,0-82.5-37.1-82.4-82.8
		C35.2,38.5,72.2,1.7,117.6,1.7z M65,84.3c0.1,28.8,23.6,52.4,52.5,52.4c28.8,0,52.4-23.5,52.5-52.4c0-29.1-23.7-52.7-52.8-52.6
		C88.5,31.8,65,55.5,65,84.3z" />
	<path d="M216.9,193.9c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.2-53,54.3
		c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.3c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1
		c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.9-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1
		C214.5,193.7,215.4,193.8,216.9,193.9z" />
	<path d="M216.9,494.8c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.1-53,54.3
		c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.4c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1
		c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.8-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1
		C214.5,494.7,215.4,494.8,216.9,494.8z" />
	<path d="M199.4,467.5c-10.5,0-20.1,0-29.8,0c-0.8-4.5-1.4-8.9-2.5-13.2c-6.1-22.6-26.7-38.5-50.1-38.6c-25.3-0.1-50.7-0.1-76-0.1
		c-1.8,0-3.6,0-5.7,0c0-10,0-19.6,0-29.7c1.5-0.1,3.1-0.2,4.7-0.2c25.2,0,50.3-0.1,75.5,0c40.8,0.1,73.8,27.1,82,66.9
		C198.5,457.2,198.7,462.1,199.4,467.5z" />
	<path d="M20.5,166.7c-8.1,0-14.5-6.6-14.4-14.7c0.1-8,6.7-14.5,14.8-14.3c7.8,0.2,14.2,6.6,14.2,14.4
		C35.1,160.2,28.5,166.7,20.5,166.7z" />
</g>
	<g id="logo.horizontal_logo" fill="#fff">
	<path d="M117.6,1.7c45.6,0,82.6,37.1,82.4,82.8c-0.1,45.4-37.1,82.2-82.5,82.2c-45.6,0-82.5-37.1-82.4-82.8
		C35.2,38.5,72.2,1.7,117.6,1.7z M65,84.3c0.1,28.8,23.6,52.4,52.5,52.4c28.8,0,52.4-23.5,52.5-52.4c0-29.1-23.7-52.7-52.8-52.6
		C88.5,31.8,65,55.5,65,84.3z" />
	<path d="M216.9,193.9c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.2-53,54.3
		c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.3c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1
		c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.9-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1
		C214.5,193.7,215.4,193.8,216.9,193.9z" />
	<path d="M216.9,494.8c0,10,0,19.5,0,29.8c-2,0-3.9,0-5.8,0c-31,0-62,0-92.9,0.1c-30.3,0.1-53.8,24.1-53,54.3
		c0.7,29,25.6,51.8,55.3,50.6c22-0.9,41.7-16.7,47.7-38.4c0.5-1.7,0.9-3.5,1.4-5.4c9.9,0,19.7,0,29.8,0c-0.6,10.5-3.8,20.1-8.5,29.1
		c-16.4,31.8-50.5,48.9-86.8,43.6c-33.4-4.8-61.5-32.6-67.8-66.8c-9-49.8,29.2-96.5,79.8-97.1c32.5-0.3,65-0.1,97.4-0.1
		C214.5,494.7,215.4,494.8,216.9,494.8z" />
	<path d="M199.4,467.5c-10.5,0-20.1,0-29.8,0c-0.8-4.5-1.4-8.9-2.5-13.2c-6.1-22.6-26.7-38.5-50.1-38.6c-25.3-0.1-50.7-0.1-76-0.1
		c-1.8,0-3.6,0-5.7,0c0-10,0-19.6,0-29.7c1.5-0.1,3.1-0.2,4.7-0.2c25.2,0,50.3-0.1,75.5,0c40.8,0.1,73.8,27.1,82,66.9
		C198.5,457.2,198.7,462.1,199.4,467.5z" />
	<path d="M20.5,166.7c-8.1,0-14.5-6.6-14.4-14.7c0.1-8,6.7-14.5,14.8-14.3c7.8,0.2,14.2,6.6,14.2,14.4
		C35.1,160.2,28.5,166.7,20.5,166.7z" />
</g>
</svg>

?>

css использую ваш и js тоже.

это код svg. он в решении вашей задачи никак не поможет 🙁

дайте ссылку на вашу страницу, на которой наблюдается баг

Вот на главной такой баг, а на остальных вроде работает корректно, только не большой пролаг во время первого скрола.  http://a0349134.tw1.ru/

попробуйте уменьшить время анимации с 3s до .5s

Попробовал и уменьшить время и увеличить, лаг не убирается. А вот когда отлючил слайдер, он заработал как нужно, не считая лага первого скрола. 

надо поиграть с параметрами анимации, чтоб никаких там задержек не было (delay) и т. д.

Я сделал медленнее, чтобы наглядно увидеть. http://a0349134.tw1.ru/ , именно во время первого скролла такая запара. Вот CSS 

<?php
#logo.vertical_logo {
    
  animation: move_vertical 11s linear forwards;
}
#logo.horizontal_logo {
    
  animation: move_horizontal 11s linear forwards;
  transform: translate(433px, 223px) scale(1) rotate(90deg);
}

@keyframes move_vertical {
  from {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
  49.9% {
    transform: translate(0px, 0px) scale(0) rotate(0deg);
  }
  50% {
    transform: translate(0px, 0px) scale(0) rotate(270deg);
  }
  to {
    transform: translate(0px, 0px) scale(1) rotate(270deg);
  }
}

@keyframes move_horizontal {
  from {
    
    transform: translate(0px, 0px) scale(1) rotate(270deg);
  }
  49.9% {
    transform: translate(0px, 0px) scale(0) rotate(270deg);
  }
  50% {
    transform: translate(0px, 0px) scale(0) rotate(0deg);
  }
  to {
    transform: translate(0px, 0px) scale(1) rotate(0deg);
  }
}



?>

jQuery(window).scroll(function(){
  var scroll_top = jQuery(window).scrollTop();

  if( scroll_top > 100 ) {
    jQuery('#logo').removeClass('horizontal_logo');
    jQuery('#logo').addClass('vertical_logo');
  }
  else {
    if( jQuery('#logo').hasClass('vertical_logo') ) {
      jQuery('#logo').addClass('horizontal_logo');
    }
    jQuery('#logo').removeClass('vertical_logo');
  }
});

попробуйте js на этот заменить

Спасибо большое, всё работает. Осталось наладить конфликт с слайдером, если не получится, заменю на другой. Спасибо ещё раз:)