Search the Community

Background While following a video of JsMastery, I was introduced to the website of Zentry. I was not willing to go with the clipPath of polygon but trying to animate the dynamic paths that morphs the path of div with scroll trigger as implemented in the website. I am aware of that i haven't used the plugin of morphsvg as when is was using clipPath polygon it was working. Problem STMT I found that they were dynamically adjusting the clip path based on the screen width. I took 2 steps in which the shape of the div container changes. For the hero section ( section with the video playback ) the initial path as somewhat of the equation. Step 1 - 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 Step 2 - 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 There might be other path equations but currently i am overloaded with 2. Solutions I Tried Try 1 - I tried to add a custom hook named useResponsivePath which has a useEffect hook which contains resize eventListener attached to window and when called return 2 paths based on that specific width { initial, final } 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}')`, }); }); Try 2 - Since the previous approach did nothing i tried to integrate the path to an svg element 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 } }); }); And for the svg <svg width="0" height="0"> <clipPath id="dynamicClip" clipPathUnits="objectBoundingBox"> <path id="clipPathShape" d="[original path i.e. the step 1]" /> </clipPath> </svg> <div id="video-frame" style={{ clipPath: "url(#dynamicClip)", WebkitClipPath: "url(#dynamicClip)" }} > { Rest of code } </div> Any Help is much Appreciated. Thank You

Hello everyone, I've created a tweenmax that alters a clip-path from an external svg file. While it does seem to work, there is a problem with the rendering as you'll see in the attached pic. Once I hover over the div with the cursor then it changes immediately to the correct clip-path. What could be the issue here? EDIT I attached the screenshot