[Animate with anchor on center of div]

Thanks Jonathan and Rodrigo in my case there is only text so scaling of that is not an issue so I can use the solution provided by Jonathan in my case. 

Thanks a ton for your help!

 

Kumar.

[Animate with anchor on center of div]

I am trying to increase height,width and return back to original height, width. But this is hapening with anchor around top left ,I need it to do around the centre. Is there any setting that I can use for that?

 

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

var div=document.getElementById('divHome');
var width=100;
var height=100;
TweenMax.to(div, 1, { width: width * 1.5, height: height * 1.5 });
TweenMax.to(div, 1, { width: width, height: height }).delay(1);

[issue with combining straighline tween and bezier curve]

Thanks a ton carl, that explains the issue I am having.

[issue with combining straighline tween and bezier curve]

Having issue with combining linear and bezier curve tweens.

 

If you look at this pen the second tween doesn't start after the first one ends.

 

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

tl.to(div, 2, {
                left: 150,
                top: 50,
                ease: Linear.easeNone
            })
            .to(div, 2, {
                bezier: {
                    type: "cubic",
                    values: [{ x: 150, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 50 }, { x: 50, y: 150 }],
                    autoRotate: true
                },
              ease: Power1.easeNone});

adding the following function to second tween fixes but am I missing some setting?

onStart: function () {
                //set this to zero as this is causing issues with actual position of item
                div.style.left = '0px';
                div.style.top = '0px';
            }

[Rotating items around a rectangle]

After tweaking css a little, managed to get it working.

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

[Rotating items around a rectangle]

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'}
            );

[Rotating items around a rectangle]

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

[Rotating items around a rectangle]

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

[Rotating items around a rectangle]

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

[Rotating items around a rectangle]

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

[Rotating items around a rectangle]

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.

[Rotating items around a rectangle]

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.

[move an object inside canvas]

Problem is with position of div that's supposed to move. Sorted it by placing it correctly.

 

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

 

But when the page loads the animation starts automatically. Am I missing any setting so it will start only after clicking play button?

[move an object inside canvas]

I have created Bezier curve using Canvas and added a div (square box) to it. Now when I am trying to move the div along Beizer curve the CO-Ords its considering are wrt to the div outside of it but not the Canvas element. So its ending up in a different curve compared to the actual curve drawn on the Canvas.

 

Is there any example of moving objects drawn using Canvas?

 

Starting point { x: 0, y: 0 }

Control point 1 { x: 1, y: 50 }

Control Point 2 { x: 200, y: 400 }

End point { x: 400, y: 50 }

 

var playBtn = document.getElementById("playBtn");
        playBtn.onclick = function () {
            if (document.getElementById("box") != null) {
                var tween1 = TweenMax.to(document.getElementById("box"), 5, {
                    bezier: { type:"cubic", values: [{ x: 0, y: 0 }, { x: 1, y: 50 }, { x: 200, y: 400 }, { x: 400, y: 50 }], autoRotate: false },
                    ease: Power1.easeInOut
                });

                tween1.play();
            }
        };

 

Thanks,

Kumar.