Jump to content
GreenSock

Kumar

Rotating items around a rectangle

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I am trying to rotate div items around a rectangle but having issues with rotate it. The items are not moving at all. Any help much appreciated.

 

Edited:The items are not moving together but instead they are moving one after another and stopping after one rotation.

 

See the Pen CfADH by pannamraju (@pannamraju) on CodePen

 

 

Thanks,

Phani.

Link to comment
Share on other sites

I have improved it a little using timeline max as mentioned here but the rotation seems to be happening a bit randomly. Need to make them rotate sequentially like a train going around.

Link to comment
Share on other sites

I had a quick look and the 'randomness' looks like its caused by the data in the contentItems array:

 

{ id: 'A' } needs { initialPosition: 'top' } added

{ id: '2' } change to { initialPosition: 'bottom' }

 

Not sure if that's actually 'correct' for your data, but it at least makes a uniform set of tweens around the rectangle.

 

As for making it more like a train, you could offset the start times of each timeline, but because the boxes are all different positions from the first .to() position, the first movement around the rectangle is going to be different since they all take 1 second to move different distances.

 

You could try having them all start at the same starting coordinates; create the same timeline for all of them, but offset the initial start time. This way they all follow the exact same track without that shorter first movement.

 

See the Pen rJLcE by jamiejefferson (@jamiejefferson) on CodePen

 

I had to reorder the data to get the original layout you had, but I'm sure you can work out whatever changes you might need to make here.

  • Like 1
Link to comment
Share on other sites

Thanks for that James. I fixed some of those issues and altered the speed based on distance to travel. Now at least I know where to look at for fixing the issue. Also adding ease:Linear.easeNone made sure there was no delay between tweens which almost got to where I wanted.

 

I have also considered starting them all from one place but thats not an option they need to be placed at a particular place for the start and need to move them based on user input.

 

 

See the Pen CfADH by pannamraju (@pannamraju) on CodePen

Link to comment
Share on other sites

I have not got the rectangular animation in place but need to follow a circular path towards the edges.

So the animation path has to be circular towards the edges. I believe there is no built in mechanism for an arc. To achieve that I have tried to follow a bezier curve from 200,50 to 50,150 but when I have added it to timeline its not moving in the expected place around the top left corner.

I have added the bezier here can you please see if I am getting something wrong?

var tl = new TimelineMax({ repeat: -1, repeatDelay: 0, delay: 0 });
                var time = 1;
                tl.to(div, 1 * 1, {
                bezier: {
                    type: "cubic",
                    values: [{ x: 200, y: 50 }, { x: 150, y: 50 }, { x: 50, y: 100 }, { x: 50, y: 150 }],
                    autoRotate: false
                },
                ease: Power1.easeNone
            });

See the Pen mukyn by pannamraju (@pannamraju) on CodePen

 

Rectangular working version 

See the Pen CfADH by pannamraju (@pannamraju) on CodePen

Link to comment
Share on other sites

Hi Phani,

 

How does it looks with this values?:

values: [{ x: 200, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 200 }],

Since the cubic bezier has two control points, plus the starting and ending coordinates, you can get a pretty nice curve by putting the control points in the exact same coordinates and give the starting and ending points the same inverted values.

 

Another possibility is to use a regular bezier adjusting the curviness value to 1.5, as you can see in the following example the results are quite good and you reduce the amount of code and thinking :D

 

See the Pen kjmDo by rhernando (@rhernando) on CodePen

 

Rodrigo.

  • Like 2
Link to comment
Share on other sites

Problem is not with the smoothness of the curve but where its starting for the 200,50 point.

 

I have updated pen with the values mentioned by you but its still starting from somewhere in the middle as opposed to top left corner.

 

See the Pen mukyn by pannamraju (@pannamraju) on CodePen

Link to comment
Share on other sites

Looks like problem is with the position: absolute of css thats causing the issue. Changing that has fixed the issue of starting point.

Link to comment
Share on other sites

I am now having a different problem. I am trying to tween CSS top,left in sequence with a Bezier curve but thats not playing very well.

 

One thing I have noticed is once the bezier animation is done a new css property -webkit-transform which is not getting updated by animating on top, left. Is there anyway I can update them using css tween? 

element.style {
left: 50px;
top: 300px;
width: 50px;
height: 50px;
position: static;
-webkit-transform: matrix(1, 0, 0, 1, 50, 150);
}

var tl = new TimelineMax({ repeat: 0, repeatDelay: 0, delay: 0 });
                var time = 1;
              tl.to(div, 1 * 1, {top:50,left:150,position:'relative' }
            ).to(div, 0, {position:'static' }
            ).to(div, 1 * 1, {
                bezier: {
                    type: "cubic",
                    values: [{ x: 150, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 150 }],
                    autoRotate: false
                },
                ease: Power1.easeNone
              }).to(div, 1 * 1, {top:300,left:50 ,position:'static'}
            );
Link to comment
Share on other sites

Glad you sort it out.

 

Happy Tweening!!

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.
×