issue with combining straighline tween and bezier curve

[Kumar]

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

[Carl]

To me it appeared that the second tween (bezier) was indeed playing immediately after the first tween (diagonal linear). The problem was a jump in position between the end of the first tween and the start of the second tween.

 

I think the problem here is that you are mixing positional tweens (left/top) with transformations(x/y)

 

If the first tween moves left:150 and then the second tween starts at x:150, the x:150 is offset 150 pixels from where the element is when left = 150. 

 

The best solution is just to stick with animating x and y OR left and top. I'd choose x/y as shown here: http://codepen.io/GreenSock/pen/telGq

[Kumar]

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