[Animating SVG Polygon Points using attrPlugin]

Hey all,

 

Got a bit of a quandary going here.

 

So what I'd like to be able to do is to move the points of a polygon contained within a mask a variable amount (in this demo, 400 pts).

 

A pen can be found here: (FF only) codepen.io/johnblazek/pen/CqEpd

 

I'm using the attrPlugin, and adjusting the x/y coordinates within the point, but I'm getting no luck. 

 

Could the fact I'm using this as a mask be messin me up?

[Retriving X value on update]

Thanks guys!

 

I ended up writing my own codepen for this using jQuery to sort the matrix value: 

See the Pen gkHeI by johnblazek (@johnblazek) on CodePen

 

But I think _gsTransform is the better option here, this is good to know!

 

-JB

[Retriving X value on update]

Hey all, wanted to see if there is a way to pass a currently tweened value through the onUpdateParams parameter.

 

Example:

TweenMax.to( $('.el'), 1, { x:_X, onUpdate:_FUNCTION, onUpdateParams:[???this.x, this.tweenedValue, I dunno],  ease:Quad.easeOut } ); 

 

function _FUNCTION($x)

{

console.log('looking for the $('.el') X value ) 

}

 

especially with an X value, would rather be able to pull that value with GSAP rather than use the browser selectors.

 

Thanks!

[A couple odd things with translateZ]

Hey TweenMaxers,

 

Was futzin around and prototyped up a 3d carousel (

See the Pen nceyw, by johnblazek (@johnblazek) on CodePen

also using on my personal site) that works well in Webkit, followed by Safari and maybe IE10 (it doesn't work on my VM)

 

Noticed a couple things happening when I tried to animate on the Z axis.

 

1. In lines 60-64 in the JS, I'm defaulting to use the vendor prefixes in order to get translateZ to show true perspective. 

 

Tried using this code: TweenMax.set($item, { rotationY: rY * i, z:radius }), but throws some weird positions when used.

 

2. The other weird thing is if you reference line 103 and 104, you'll notice I broke them up into 2 calls, one, a "to," and the other a "set" because when I tried combining them and animate the z axis along with rotation X and Y, once you go past rotation Y -90 degrees and 90 degrees, it spazzes out.

 

Any ideas?