get value of attr

[gareth 8 Likes (Newbie)]

I would like to be able to get a svg point value as the tween is updating, so I can move another svg in sync:

var curve = {
  d: 'M100,300 C100,100 ' + bendAmount + ',40  ' + bendAmount + ',40'
};

TweenMax.to("#pole", force, {
  attr: curve,
  repeat: -1,
  yoyo: true,
  ease: RoughEase.ease.config({
    strength: 2,
    points: 20
  }),
  onUpdate: topper,
  onUpdateParams:["{self}"]
});


function topper (tween) {
  // how do I get the values of curve ?
}

I am trying to animate the circle so it attached to the top of the line. 

 

See the Pen NAjRLV by garethj (@garethj) on CodePen

[gareth 8 Likes (Newbie)]

sorry please close, it is easier to just create a new tween for the circle. 

TweenMax.to("#circle", force, {x:bendAmount-100,repeat:-1,yoyo:true,ease:Power1.easeInOut});

[Jonathan 5,176 Likes (Superhero)]

Hello gareth,

 

Have you tried to console out the tween argument in your topper() function?

 

The tween argument in your topper() function represents "{self}" which is the timeline of your to() tween.

 

You can console out that object console.log(tween) and see the timeline object

 

And console out the value with console.log(tween.vars.attr.d) which outputs: M100,300 C100,100 125,40 125,40

 

Look in the browser console and inspect the timeline 'tween' object being outputted:

 

See the Pen BzRQoX?editors=0010 by jonathan (@jonathan) on CodePen

function topper (tween) {
  // need to get value of bendAmount point
  console.log(tween);
  console.log(tween.vars.attr.d); // outputs: M100,300 C100,100 125,40  125,40
  // tween.pause(); // added pause() so you can see the timeline object 'tween' and 'attr' values in the console
}

Let us know if you need more help and have more questions?

 

[gareth 8 Likes (Newbie)]

thanks Jonathan.

 

It does not return the "live" value of the attr while tweening i.e it always returns  M100,300 C100,100 125,40 125,40, not the values as it is tweening. is it possible to do that? 

[OSUblake 9,990 Likes (Superhero)]

This might help you out for the sway. It's a simplified version of this

See the Pen JYpOOK by osublake (@osublake) on CodePen

.

See the Pen OyEgop?editors=0010 by osublake (@osublake) on CodePen

 

Each blade of grass uses two bezier curves to create the tapered look, but you can use one. The th variable in the update function is the angle in radians, which you could use to set your flag.

[gareth 8 Likes (Newbie)]

thanks! that looks very helpful.