ScrollTrigger: i want to fixed the position of element at center of screen while moving along SVG Path

[baothien]

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

 

 

[baothien]

Someone help me please 😊

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[baothien]

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!!!

[baothien]

3 hours ago, GSAP Helper said:

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

 

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

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

[Rodrigo]

Hi,

 

Sorry about the difficulties but without a minimal demo there is not much we can do to help. On top of that we don't have the time resources to provide free general consulting or create something from scratch for our users. What you're trying to achieve is not the simplest thing to do, here are a few demos:

 

See the Pen LYYJNmQ by osublake (@osublake) on CodePen

 

See the Pen MWPOQmo by GreenSock (@GreenSock) on CodePen

 

See the Pen MWqWvom by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[GreenSock]

I built a helper function specifically for this: 

See the Pen vYMJdjB?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Related forums post: 

 

I hope that helps!

[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!!!