Skip to content

Instantly share code, notes, and snippets.

@baslie

baslie/index.html

Created September 20, 2024 08:36
Show Gist options
  • Save baslie/74cd91a75bab6edd894f66b3ae64a0e1 to your computer and use it in GitHub Desktop.
Save baslie/74cd91a75bab6edd894f66b3ae64a0e1 to your computer and use it in GitHub Desktop.
Download ZIP
SVG-анимация фигурки по пути при скролле
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<!--
Этот код создает веб-страницу, на которой с помощью GSAP
анимируется движение SVG-фигурки по заданному пути в зависимости
от прокрутки страницы. В HTML используется SVG для создания кривой
линии и фигурки. При скролле фигурка плавно движется вдоль пути,
используя MotionPathPlugin и ScrollTrigger. Анимация начинается
и заканчивается в зависимости от позиции скролла, обеспечивая
плавное движение фигурки вдоль линии.
-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Движение фигурки по линии</title>
<style>
body {
margin: 0;
height: 300vh; /* Делаем страницу длиннее для теста скролла */
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
position: relative;
}
svg {
width: 100%; /* SVG занимает всю ширину контейнера */
height: auto; /* Автоматическая высота */
/* border: 1px solid #ccc; */
}
#figure {
width: 54px;
height: 40px;
position: absolute; /* Абсолютное позиционирование */
top: 0;
left: 0;
transform-origin: center center; /* Центрирование точки вращения */
}
</style>
</head>
<body>
<!-- SVG с линией -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 679.3740234375" fill="none">
<!-- Кривая линия -->
<path id="path" d="M0.5830137827465376 27.24586684465209C71.54923410645753 81.39159686300684 270.286534290005 163.15490739195727 497.50762556315703 57.042069080594025C577.9246454196563 16.03229634573669 767.2102786584348 -42.53490405473052 881.0118471550142 51.27510095110962C929.9833806107124 91.64411813782745 966.6525613215417 193.43167028199565 797.8724511930585 233.41623894543633C689.5805105956949 254.40160186884697 464.1230769230769 261.4706490906057 360.06007008176203 271.3822125813449C299.5070248623394 277.14894043050225 171.6077290171867 281.74790589020523 147.1611279826464 392.00774236609374C123.61245453028533 498.2188553312197 180.9781812114133 575.0268646754547 219.24859002169197 600.1025196062072C302.8709494410145 654.8888369764725 406.4293675955281 652.0054730518939 472.5160687468713 652.0054730518939C599.8718504922409 652.0054730518939 663.3082596362423 608.2720507258468 711.8472885032538 523.6885699983313C760.3863173702653 439.10508927081594 822.0038044385116 313.1789754713833 1072.2845986984817 362.2129818121141C1190.0267645586516 385.27989320874354 1375.5327882529616 330.8155514767228 1439.4497580510595 286.2795928583347" stroke="#B9B9B9" stroke-width="2" stroke-dasharray="8 8"></path>
</svg>
<!-- SVG фигурка человека -->
<svg id="figure" xmlns="http://www.w3.org/2000/svg" width="54" height="40" viewBox="0 0 54 40" fill="none" style="position:absolute;">
<path d="M41.8932 8.47601C44.0644 8.77331 46.0688 7.23756 46.3689 5.04566C46.669 2.85375 45.1513 0.835733 42.98 0.538437C40.8076 0.240981 38.8045 1.77689 38.5043 3.9688C38.2042 6.1607 39.7208 8.17856 41.8932 8.47601Z" fill="#22F398"></path>
<path d="M31.9928 33.8707C31.9829 33.8694 31.9829 33.8694 31.973 33.868L17.0748 31.7056C16.7173 31.6566 16.5664 31.2072 16.8247 30.9464L19.6401 28.1157C19.7347 28.0164 19.8833 27.9652 20.0209 27.9943L30.3641 29.5126C30.7414 29.5643 30.999 29.1605 30.8005 28.8373L26.8301 22.3717C26.7886 22.3049 26.7486 22.2278 26.7085 22.1509C25.8783 20.3832 26.3821 18.3285 27.9221 17.1303L32.8536 12.9558C33.0146 12.8144 33.0575 12.5753 32.9517 12.3872L31.2329 9.42576C31.2086 9.3816 31.1856 9.32741 31.1613 9.28323C31.0826 9.11931 30.9338 8.80283 30.0955 8.71868C30.0657 8.7146 30.0458 8.71188 30.016 8.7078L18.0804 7.07352C17.7228 7.02456 17.5693 6.59513 17.8175 6.33304L20.3848 3.46837C20.4806 3.35898 20.6293 3.30786 20.7683 3.3269L30.5194 4.66206C32.464 4.86706 33.9598 5.83763 34.7452 7.41543L37.2903 11.8071C37.8963 12.8499 37.6622 14.1859 36.7457 14.9692L30.4654 20.2761C30.4315 20.3022 30.4075 20.3295 30.3736 20.3554C30.3623 20.3641 30.3623 20.3641 30.3609 20.3742L35.9444 29.4702C35.9852 29.5369 36.0247 29.6139 36.0562 29.6794C36.7793 31.1976 36.195 32.2918 35.9083 32.6813C35.1838 33.695 33.8638 34.0963 32.0028 33.8721C32.0127 33.8735 32.0028 33.8721 31.9928 33.8707Z" fill="#22F398"></path>
<path d="M18.8068 17.8732L0.962547 36.0441C0.810247 36.1968 0.896346 36.4536 1.10495 36.4821L5.47404 37.0804C5.55354 37.0913 5.62844 37.0607 5.68634 37.0074L23.6143 18.8889C23.7668 18.7362 23.6792 18.4893 23.4721 18.4507L19.019 17.8001C18.9396 17.7892 18.8546 17.8184 18.8068 17.8732Z" fill="#22F398"></path>
<path d="M51.9905 10.6139L49.3884 11.881C49.1507 11.9914 49.0419 12.2726 49.1295 12.5194C49.6359 13.916 49.4737 15.4662 48.6244 16.7997C48.3935 17.1561 48.1164 17.4755 47.7957 17.7482C45.4924 19.7199 42.2522 19.0822 40.7534 16.8043C40.6942 16.7145 40.4532 16.4058 40.237 16.1414C40.0644 15.9237 39.7344 15.899 39.5348 16.0963L37.4007 18.1626C37.181 18.3673 37.1542 18.7108 37.3121 18.9571C38.7276 21.1827 41.0245 22.5795 43.4973 22.9181C45.5026 23.1926 47.6343 22.7699 49.5142 21.5263C50.8157 20.6632 51.8616 19.4586 52.5495 18.0519C53.6508 15.7727 53.7436 13.2431 52.873 10.9593C52.7395 10.6041 52.336 10.4468 51.9905 10.6139Z" fill="#22F398"></path>
</svg>
<!-- Подключение GSAP и ScrollTrigger -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/MotionPathPlugin.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
gsap.registerPlugin(ScrollTrigger, MotionPathPlugin);
// Анимация движения по пути с привязкой к скроллу
gsap.to("#figure", {
scrollTrigger: {
trigger: "#path", // Элемент для скролла
start: "top center", // Начало анимации
end: "bottom center", // Конец анимации
scrub: true, // Плавная анимация в зависимости от скролла
markers: false // Отключаем метки для отладки (можно включить)
},
duration: 1,
ease: "power1.inOut", // Плавное ускорение в начале и замедление в конце
motionPath: {
path: "#path", // Путь, по которому движется фигурка
align: "#path", // Выравнивание по пути
autoRotate: false, // Поворот фигурки в зависимости от направления движения
alignOrigin: [0.5, 0.5] // Центровка фигурки
}
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment