Анимирующий динамический путь на основе ширины экрана с использованием GSAP (React) ⇐ CSS

[Anonymous]

фон
. Я не хотел идти с Клиппатом Полигона, но пытался оживить динамические пути, которые превращаются в путь Div с триггером прокрутки, как это реализовано на веб -сайте. Я знаю, что я не использовал плагин Morphsvg. Я сделал 2 шага, в которых изменяется форма контейнера Div. Для раздела Hero (раздел с воспроизведением видео) начальный путь как несколько уравнение. $ {W} 862,422 L 5 862,422 Q -3 862,422 -3 854,422 L -3 5 Q -3 -3 5 -3 Z < /p>
Шаг 2 -< /p>
m $ {0,931 * W -34,3} 185,647 l $ {0,931 * W -34,6} 34,6} 34,6. $ {0,947 * w - 32,8} 186,339 $ {0,95 * W - 28,9} 194,137 L $ {0,99 * W + 2,2} 786,123 Q $ {0,993 * W + 4,0} 793.92 $ {0,986 * W + 2,0} 794,063 L $ { -0. 0,966 * w + 2,0} 794,063 l $ { -0. 462.0} 819.577 Q ​​$ { - 1,0 * W + 460,0} 819,72 $ { - 0,994 * W + 450,6} 812.027 L $ {1,286 * W - 432,0} 98,3966 Q $ {1,291 * W - 435,0} 90,7039 * $ {1,291 * W - 435,0} 90,70397 * wima {1,291 * W - 435,0} 90,70 397 * W 438.5} 91.3961 z
Могут быть и другие уравнения пути, но в настоящее время я перегружен 2. eventlistener прикреплен к окну и когда называется return 2 путей на основе этой конкретной ширины {initial, final} < /p>
const clipPathD = useResponsivePath()
useGSAP(() => {
gsap.set("#video-frame", {
clipPath: `path('${clipPathD.initial}')`,
});
gsap
.timeline({
scrollTrigger: {
trigger: "#video-frame",
start: "center center",
end: "bottom center",
scrub: true,
},
defaults: { ease: "power1.inOut" },
})
.to("#video-frame", {
clipPath: `path('${clipPathD.initial}')`,
});
});
< /code>
try 2 -< /p>
Поскольку предыдущий подход ничего не сделал, я пытался интегрировать путь к элементу SVG < /p>
useGSAP(() => {
gsap.set("#clipPathShape", { attr: { d: paths.initial } });

gsap.timeline({
scrollTrigger: {
trigger: "#video-frame",
start: "center center",
end: "bottom center",
scrub: true,
},
defaults: { ease: "power1.inOut" },
})
.to("#clipPathShape", { attr: { d: paths.middle } });
});
< /code>
и для svg < /p>





id="video-frame"
style={{ clipPath: "url(#dynamicClip)", WebkitClipPath: "url(#dynamicClip)" }}
>
{ Rest of code }

< /code>
Любая помощь очень ценится. Спасибо
edit -
Я прикрепил ссылку на CodeSandbox. Я внедрил полигонный путь, просто чтобы продемонстрировать, чего я пытаюсь достичь по динамическому пути. И есть раздел, ниже которого я не работал над отзывчивостью.

Подробнее здесь: https://stackoverflow.com/questions/796 ... gsap-react