Animate on bézier with ScrollMagic: Initial state = first bézier point

Question

See a jsfiddle here

I am tweening along a bézier path with 3 points.

// bezier data
var bezierData = {
  curviness: 1,
  autoRotate: false,
  values: [
    {x: 0,  y: 0, rotation:"40_cw"}, /* <-- The desired state of the object before any animation has happened */
    {x: 20,  y: 0, rotation:"0_ccw"},
    {x: 40, y:0, rotation:"-20_ccw"}
  ]
};

// build tween
var tween = new TimelineMax()
          .add(TweenMax.to("#testobj", 1, {css:{bezier: bezierData}, ease:Power1.easeInOut}));

// create scene
var scene = new ScrollMagic.Scene({
        triggerElement: "#testobj",
        duration: 100,
        offset: 10
    })
    .setTween(tween)
    .addTo(ctrl)
    .addIndicators();

What I want: The initial state of my object (i.e. before any animation has happened) should be the first bézier point, {x: 0, y: 0, rotation:"40_cw"}.

What's happening: The initial state is the object's default style, i.e. the equivalent of {x: 0, y: 0, rotation:"0"}. Note how in the jsfiddle the green square starts out upright while I want it to start rotated 40° clock-wise.

Answer 1

Tahir Ahmed's answer works!

perhaps you can use .set() before doing the .to() tween? something like this.