[attrPlugin to tween attribute="x y z"]

Thanks for the replys!

 

Wow ! sweet Thank you guys. Gsap Rox

 

EDIT: I posted the below before i refreshed to see your reply Jack:

 

from the devs:

A-Frame uses custom `setAttribute` functions, that accept objects and not just strings, it seems unlikely that a generic HTML attribute tweener would work. Would need to call `el.setAttribute('position', {x: 1, y: 2, z: 3})`, 
and NOT `el.setAttribute('position', '1 2 3')`.
 
i tried to plug this into the attr tween with no luck.
 
Could i tween the three.js object associated with the object if i can select it?

<a-entity id="mario"></a-entity>
var el = document.querySelector('#mario').object3D.matrixWorld;

[attrPlugin to tween attribute="x y z"]

Thank you for the response.

 

I have Commented Out the Working Line

See the Pen KNwVmb?editors=1011 by anon (@anon) on CodePen

 

I am using the a-frame library which creates three.js scenes with html markup.

The rotation attribute is set like: rotation=(x y z)

 

Here is the documentation for the rotation element

https://aframe.io/docs/0.3.0/components/rotation.html

 

What is the simplest way of manupulating the attributes with timelinemax.

Is it necessary to use an update function?

[attrPlugin to tween attribute="x y z"]

Hi,

 

If the attribute is multi parted like a 3d coordinate,

how can the attribute plugin animate between the multiple numbers (x y z) -> (x y z) ?

 

My object has the following markup: 

<object id="object_A" rotation="0 0 0"></object>

 

How can i use the attribute plugin or another method to tween the coordinates?

 

{attr:{rotation: "0" }}, { attr:{rotation: " 80" }

works but only effects the Z coordinate.

I was hoping that it was possible without access to the individual coordinates such as 'rotationX' or 'rotation-x'

 

 

My try fails silently:

var objectA = $( '#object_A' );
tlAnimationTimeline
.fromTo( objectA, 10, {attr:{rotation: "0 0 0" }}, { attr:{rotation: " 0 360 180" }, ease: Strong.easeOut, repeat: -1, yoyo: true} )