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

[Anonymous]

фон
. Я не хотел идти с Клиппатом Полигона, но пытался оживить динамические пути, которые превращаются в путь Div с триггером прокрутки, как это реализовано на веб -сайте. Я знаю, что я не использовал плагин Morphsvg. Я сделал 2 шага, в которых изменяется форма контейнера Div. Для раздела «Герой» (раздел с воспроизведением видео) начальный путь как несколько уравнение. < /P>
Шаг 1 -< /p>

Код: Выделить всё

`M ${w} -3 L ${w} -3 Q ${w + 8} -3 ${w + 8} 5 L ${w + 8} 854.422 Q ${w + 8} 862.422 ${w} 862.422 L 5 862.422 Q -3 862.422 -3 854.422 L -3 5 Q -3 -3 5 -3 Z`
< /code>
Шаг 2 -< /p>
`M ${0.931 * w - 34.3} 185.647 L ${0.931 * w - 34.3} 185.647 Q ${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.996 * w + 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.7035 ${1.297 * w - 438.5} 91.3961 Z`

Могут быть и другие уравнения пути, но в настоящее время я перегружен с помощью 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>
Я прикрепил ссылку к коде и. Я внедрил полигонный путь, просто чтобы продемонстрировать, чего я пытаюсь достичь по динамическому пути. И есть раздел, ниже которого я не работал над отзывчивостью.


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