Jos0_0 Posted November 20, 2021 Share Posted November 20, 2021 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 Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2021 Share Posted November 20, 2021 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? Link to comment Share on other sites More sharing options...
Jos0_0 Posted November 20, 2021 Author Share Posted November 20, 2021 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. Link to comment Share on other sites More sharing options...
GreenSock Posted November 20, 2021 Share Posted November 20, 2021 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now