Jump to content
Search Community

get value of attr

gareth test
Moderator Tag

Go to solution Solved by gareth,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

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?

 

:)

  • Like 3
Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...