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.

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: https://codepen.io/creativeocean/pen/mdrmZYY. 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.