[Make path given by motionPath responsive]

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.

[Make path given by motionPath responsive]

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