Make path given by motionPath responsive

[Jos0_0]

Hello, sorry if my English is not good.

 

A few weeks ago, I started studying GSAP, and I am delighted with this library. I am making the circles rotate aligned on the white line, I base myself on the example provided by GSAP:

See the Pen mdrmZYY. by creativeocean (@creativeocean) on CodePen.

I made the circles responsive, although I don't know if it is the best way to do it, the problem occurs when the size of the lines of the circles changes, I can't make the circles stay aligned to the white line. I don't know if the problem is related to the way I use svg or gsap.

 

I hope I have explained myself well.

See the Pen XWaGYda by -Jose- (@-Jose-) on CodePen.

[GreenSock]

That's because you're trying to use a motionPath that doesn't exist in the DOM. MotionPathPlugin needs to plot the element's location in the viewport, but it can't do that if it's not in the DOM

 

So you can just remove the parameter that is telling the convertToPath() not to swap the element in (I'm curious why you were doing that):

// BAD
MotionPathPlugin.convertToPath('.circle_line2', false)[0]

// GOOD
MotionPathPlugin.convertToPath('.circle_line2')[0]

Does that clear things up? 

[Jos0_0]

Hi @GreenSock

I have modified that part, but I still have the problem of making it responsive, in the example I try to define the motionPath and change the radius of the circular lines every time the window changes size.

.add(
      window.onresize = window.onload = function(){
        gsap.set('.stage', {x:'95%', y:'50%', opacity:1})

        let viewportH = window.innerHeight;
        let viewportW = window.innerWidth;
        let size = (viewportW/2) / $(".circle_line").length;
        
        $( ".circle_line" ).each(function( index ) {
          gsap.set(this, {r: size*(index+1) + 'px'});
        });
        let t1 = gsap.timeline();

        t1.to('.e1',  {
          motionPath:{
            path: function(index, element){
              return MotionPathPlugin.convertToPath('.circle_line2')[0];
            },
            start: function(index){
              let pos = .5/5;
              return pos * index;
            },
            end: function(index){
              let end = ((.5/5)*index) + .5;
              return end;
            },
          },
          duration:5,
          ease:'none', 
          repeat:-1,
          yoyo: true
        }, 'orbs')
      }
    )

I made motionPath not swap the elements for two reasons:

• when trying to define the radius in percentage, motionPath doesn’t work.
• When resizing the radius, it didn’t resize.

The truth is that I am somewhat confused, if my problem is related to svg or motionPath.

[GreenSock]

If you're changing the radius, then of course you'd need to re-convert that newly updated <circle> into a <path> so that MotionPathPlugin can use it. So you could keep an invisible copy of that <circle> on the stage and just re-convert that each time you update the radius (and don't swap, like you originally had it). Once you convert a <circle> to a <path>, it obviously bakes all those values into the path so you can't alter the radius.