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