baothien

Even though there was no demo, only lines of code, you still helped, and it worked very well in my case. I am very grateful for this. Have a good day my brothers!!!

I have some update, can you help me out please!

I'm very happy that you are here and supporting me 😁. I'm very sorry, I'm new here and Codepen Login/Signup is currently unavailable. However, the problems are: - The .box element is not attached to the .path when the page is loaded. - The box element sometimes moves out of the view port (it's better if it always stays at the center of the screen). I will give the code below <svg class="road" viewBox="0 0 1788 3463" fill="none" xmlns="http://www.w3.org/2000/svg"> <g clip-path="url(#clip0_411_1641)"> <path class="path" d="M1229.5 16.5C1229.5 16.5 1208.5 102 1141 120C972 135.5 871.311 127.97 725 131C576.721 134.071 432.708 136.448 326 182C114 272.5 182 552.5 172.5 699C169.329 747.897 191.441 843 268.5 895C318.3 928.605 396.874 939.758 485 945C916.5 970.667 1300.37 918.088 1526.5 980C1616.57 1004.66 1678.43 1051.96 1699.5 1114C1744.5 1246.5 1728 1309.5 1728 1377C1728 1477.5 1728 1541.5 1718 1659.5C1715.06 1694.19 1682 1832.66 1575.5 1836C1304.5 1844.5 800.658 1834.58 550 1839.5C276 1832 190.554 1937.41 187.5 2018.5C177.5 2284 180 2210.5 187.5 2456C189.868 2533.5 241.5 2590 365.5 2606.5C793.5 2619.5 1365.57 2615.76 1449.5 2619.5C1764.5 2633.53 1717.5 2834 1717.5 2873C1717.5 3030 1755.01 3327.93 1636.5 3389.5C1547 3436 1283.5 3410.32 827.5 3410C383.148 3409.69 -14 3407 -14 3407" stroke="#020878" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-dasharray="20 20" /> </g> </svg> <div class="box"></div> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js"></script> .box { position: absolute; top: 5vw; left: 5vw; width: 5vw; height: 5vw; background-color: blue; } .road { position: absolute; top: 25vw; } function boxMoving() { gsap.registerPlugin(MotionPathPlugin, ScrollTrigger); gsap.defaults({ ease: "power.easeInOut" }) gsap.timeline({ scrollTrigger: { trigger: ".path", scrub: true, autoRotate: false, start: "top center", end: "bottom center", } }) .to(".box", { motionPath: { path: ".path", align: ".path", alignOrigin: [0.5, 0.5], }, duration: 4 }, 0) } window.addEventListener('resize', boxMoving); window.addEventListener('scroll', boxMoving); Thanks for reading!!!

Someone help me please 😊

Hi. My Character is already moving along path, but i want it always stay at middle of screen (vertical). My codes is too long and i deleted it. The update is below