Jump to content


attrPlugin to tween attribute="x y z"

Moderator Tag
Go to solution Solved by GreenSock,

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



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' );
.fromTo( objectA, 10, {attr:{rotation: "0 0 0" }}, { attr:{rotation: " 0 360 180" }, ease: Strong.easeOut, repeat: -1, yoyo: true} )
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Not sure why that wouldn't work. The attribute plugin is designed (since version 1.18.0) to handle complex values like that.


Notice how it handles all the values in the "points" attribute of an SVG polygon:


var tl = new TimelineMax({repeat:-1, delay:2, repeatDelay:2});
    //animate to a star 
    tl.to("#polygon", 1.5, {attr: {points:"264,115 183,103 150,30 116,103 36,115 93,172 80,249 150,215 219,249 208,171"}, ease:Elastic.easeOut})
    //make purple (could include it in previous tween, but didn't want the elastic ease)
    .to("#polygon", 0.3, {fill:"purple"}, "-=1.5")
    //and back to a square
      .to("#polygon", 0.8, {attr: {points:"240,220 240,182 240,145 240,70 155,70 112,70 70,70 70,145 70,220 155,220"}, fill:"black", ease:Power2.easeInOut}, "+=2");




Please make sure you are using the latest version of TweenMax




If you still have problems, please provide a very simple demo that we can look at. 

Just fork the CodePen demo I made and add your own reduced code.



Link to comment
Share on other sites

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



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

Is it necessary to use an update function?

Link to comment
Share on other sites

Thanks for the demo. Knowing that its an A-Frame object and not a normal DOM element is helpful.


It is a bit odd that this line works:


.fromTo( $( '#target_object2' ), 3, { attr:{rotation:'0'} }, { attr:{rotation:'180'}, repeat: -1, yoyo: true}, 0.0)


I can see the cylinder rotate and inspect the dom node in dev tools and see the attributes changing.


But like you said the complex values do not render or get applied "behind the scenes" in dev tools.


We will let you know if you we can find out why. I highly suspect A-Frame is getting in the way somehow as the AttrPlugin has never had this problem on normal DOM elements.

  • Like 1
Link to comment
Share on other sites

  • Solution

It looks like the problem has to do with the A-Frame library stuff and the fact that it doesn't actually treat the attribute like a true string attribute. If you element.getAttribute("rotation"), you'll get an OBJECT (not a string) that has x, y, and z properties. Furthermore, if you alter those, it apparently doesn't trigger an update in the view. But you could setAttribute() and put together the string like this:




So in short, this is unrelated to GSAP - it's just an oddity in the way that library is handling attributes. Does that clear things up? 

  • Like 1
Link to comment
Share on other sites

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;
Link to comment
Share on other sites

  • 4 weeks later...

Hi !


I'm playing right now with Aframe position attribute on 3d object and with tweenmax.

The way you advices with the :

el.setAttribute('position', {x: 1, y: 2, z: 3}) 

Works well but is it possible to use the attr attribute from greensock ?



This one doesnt works ....

TweenMax.fromTo(element, 5000), { attr:{position:{x: 1, y: 1, z: 1}} }, 
 { attr:{position: {x: 5, y: 5, z: 5}}, 

   delay: 4000, 
   ease: Strong.easeOut

This way works but in a blink of an eye the value switch to 1 -> 5 so you dont have animation, just replacing values


TweenMax.to(element, 5000, 
                                    { attr:{position:"30 30 30"}, ease: Strong.easeOut, delay: 4000

Do you have an idea please?



Link to comment
Share on other sites

Hi onim4ru,


Welcome to the forums! 


Do you think you can get a demo up? I wasn't part of the previous conversation and so, not really up to speed on what's going on.




  • Like 1
Link to comment
Share on other sites

Hi !

Thanks for your fast advices.


On the codepen you could see 3 ways : 

- modifying pos directly but you dont have animations

- try to use attr attribute for a position (doesnt work)

- modifying 3d object


The way 3 is the animation i want but i want to use the attr attribute, is it possible ? 


See the Pen woXygR?editors=1010 by onim4ru (@onim4ru) on CodePen

I would like to make like my goUp() function but i wanna this acting like goRight().

Link to comment
Share on other sites

Hey onim4ru,


I am afraid it doesn't look like it is possible to animate the 3d object using the attr plugin.


Under the hood A-frame is using ThreeJS to create the assets you ultimately see (are you familiar with ThreeJS? If not you can check their project up). I haven't read much into the framework just yet but there is a whole host of implications because of that.


What GreenSock/OSUblake have shown are great ways to reach the 3D object and tween it with GSAP, is there any particular reason you want to use the attr plugin? I can't see any particular advantage of using the attr plugin just for the sake of it.

Link to comment
Share on other sites

That was just to have a generic way of developping my animations. But it is luxurious to already have a solution ! =)

Link to comment
Share on other sites

So, lets think that i wanna launch all this tweens at the same starting point but with different duration and mixing attr and threejs functions like : 


See the Pen LbBNXz?editors=1010 by onim4ru (@onim4ru) on CodePen


My problem here is to launch at the same time. It is used to generate tweens depending of what my users wants.

So i will prefere something like tweenmax.to (elem,duration, attr1 attr2 attrx ...)


simultaneous starting tweens like :

tweenmax.to(elem1,duration, property1)

tweenmax.to(elem2,duration, property2)

tweenmax.to(elemX,duration, propertyX)



Thank you for your ideas :)

Link to comment
Share on other sites

Any tweens you create will run immediately and independent of one another so, a bunch of tweens in sequence will all start at the same time.

TweenMax.to(el, dur, {properties})
TweenMax.to(el, dur, {properties})TweenMax.to(el, dur, {properties})
TweenMax.to(el, dur, {properties})

Timelines are great for sequencing tweens so, if you want all the tweens inside of a timeline to start at the same time, you can just add 0 to the position parameter. Just like you did in some of the tweens in your example pen.


I think your issue here is how you have set your click handling. At the moment, you are adding a bunch of tweens to a timeline every single time the user clicks on the cylinder. Your timeline is also infinite. The combination of those two things are a sure receipt for disaster.


Either create a new timeline on every click or create a paused animation outside your click and use .play() inside your click.


var myYellowCylinder = document.getElementById("myYellowCylinder");
var myPlane = document.getElementById("myPlane");

myYellowCylinder.addEventListener("click", move);
// myYellowCylinder.addEventListener("click", goLeft);
// myPlane.addEventListener("click", reset);

var tl = new TimelineMax({ repeat: -1, yoyo: true, paused:true })
  tl.to(myYellowCylinder, 2, { attr: { opacity: "0.5"} }, 0 )
  .to(myYellowCylinder.object3D.position, 3, { x: 5, y: 1, z: -3 }, 0)
  .to(myYellowCylinder.object3D.rotation, 3, { x: 0.5, y: 0.5, z: 3.14 }, 0)
  .to(myYellowCylinder.object3D.scale, 3, { x: 2, y: 2, z: 2 }, 0)
  .to(myYellowCylinder, 5, { attr: { color: "#990000"} }, 0)

function move() {
  • Like 1
Link to comment
Share on other sites

Hello again,


Thanks this is nice but for sure that was just testing about tweens its not gonna be my organization of tweens or performances will go deep down ;D.


Thanks for these interesting advices, and congratulations for this forum quite nice to read !

Link to comment
Share on other sites

If you really want to use attributes, you could probably create your own plugin by modifying the AttributePlugin. It doesn't look that complicated. Instead of setting a singular value, you would change it to set an object. Maybe @Dipscom can figure this one out   :P

  propName: "attr",
  API: 2,
  version: "0.6.0",

  //called when the tween renders for the first time. This is where initial values should be recorded and any setup routines should run.
  init: function(target, value, tween, index) {
    var p, end;
    if (typeof(target.setAttribute) !== "function") {
      return false;
    for (p in value) {
      end = value[p];
      if (typeof(end) === "function") {
        end = end(index, target);
      this._addTween(target, "setAttribute", target.getAttribute(p) + "", end + "", p, false, p);
    return true;

Unfortunately, there is not a lot of info on how to make plugins. This is about it...




  • Like 1
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.