motionpath target multiple objects and gap between on one path

[morag]

hi there,

im using motionpath.

i have an array of multiple objects. and they all need to loop on the same path.

my problem is the space between the items. i did a delay but when you get to the section not all of them started the loop yet..

 

how can i create a space between them on the path?

thank you

here is my code:

//values elips
    if ($(".elips").length > 0) {
        const elips = document.querySelector('.elips')
        const elipsMobile = document.querySelector('.elips-mobile')
        const hpValues = gsap.utils.toArray('.hp-value');
        hpValues.forEach((hpValue, i) => {
            gsap.to(hpValue, {
                motionPath: {
                    path: isDesktop ? elips : elipsMobile,
                    align: isDesktop ? elips : elipsMobile,
                    alignOrigin: [0.5, 0.5],
                    //autoRotate: -90,
                    immediateRender: true,
                },
                opacity: 1,
                repeat: -1,
                duration: 20,
                ease: "none",
                delay: i * 2,
            })
        })
    }

 

[GSAP Helper]

Have you tried just using the start/end properties to offset things on the path?

 

If that doesn't help, please make sure you provide a minimal demo (like a CodePen) so we can see what's going on in context. 

 

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

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

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

 

If you're using something like React/Next/Vue/Nuxt or some other framework, you may find StackBlitz easier to use. We have a series of collections with different templates for you to get started on these different frameworks: React/Next/Vue/Nuxt.

 

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

[morag]

hi. i did "fork" and made my demo in codepen.

how can i show it here?

 

See the Pen GRXvzgB by morag_h (@morag_h) on CodePen

[mvaneijgen]

@morag just paste the codepen URL of your pen here. It will automatically embed. 

 

@morag I'v removed you're latest comment with the iframe and copied the url from your pen to your previous comment

[morag]

tnx,

so im tring to make them all start at the same time (no delay..)

and create a space between them on the path

[mvaneijgen]

@morag first of welcome to the forum!

 

What I would do is distribute the items on the path based on their start and end position, if you want more info on these properties check the MotionPathPlugin docs. 

 

Just to create a quick example I've removed 2 of your elements, because with 5 items the offset was easy to calculate (but you can easily do some calculations to get it with any number of elements). The motion path end and start values go from 0 to 1 meaning with 5 elements each takes up 0.2 (0.2 * 5 = 1) and then for the end value I just do the same, but add 1 to it, because you can create larger numbers then 1 and it will just make that the items go round the path again. 

 

See the Pen poOrYeW?editors=0011 by mvaneijgen (@mvaneijgen) on CodePen

[morag]

that is perfect!!🥰

thank you