Jump to content
Search Community

Make path given by motionPath responsive

Jos0_0 test
Moderator Tag

Recommended Posts

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...