Kumar

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.

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? http://codepen.io/pannamraju/pen/apvCh 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);

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

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. http://codepen.io/pannamraju/pen/egojs 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'; }

After tweaking css a little, managed to get it working. http://codepen.io/pannamraju/pen/mukyn

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

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

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. http://codepen.io/pannamraju/pen/mukyn

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 }); http://codepen.io/pannamraju/pen/mukyn Rectangular working version http://codepen.io/pannamraju/pen/CfADH

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. http://codepen.io/pannamraju/pen/CfADH

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.

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. http://codepen.io/pannamraju/pen/CfADH Thanks, Phani.

Problem is with position of div that's supposed to move. Sorted it by placing it correctly. http://codepen.io/pannamraju/pen/kvpax But when the page loads the animation starts automatically. Am I missing any setting so it will start only after clicking play button?

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.