Tween two properties at once in Three.js with TimelineMax

[mirohristov]

TweenMax doesn't allow you to tween 2 or more properties at once in Three.js on the same tween. For example you can't tween rotation and position at once. You can only tween the rotation in one tween or the position but not both.

 

I've managed to do it by pushing 2 tweens in an array and calling tl.insertMultiple(array).

 

Unfortunately, for some unknown to me reason, it only plays fine the first time. After restart(), the tween/timeline is broken/stutters/skips.

 

Notice when the color changes to red it's no longer smooth animation.

 

Any idea why it only works once and then 'crashes'? Or is there a better way of doing the tween all together?

See the Pen WWBzmL by mirohristov (@mirohristov) on CodePen

[PointC]

Would this work for you?

 

  tl.to( obj.position, dur, { x:keyframe.p.x, y:keyframe.p.y, ease:Sine.easeIn }, "label" + i );
  tl.to( obj.rotation, dur, { x:keyframe.p.x, y:keyframe.p.y, ease:Sine.easeIn }, "label" + i );

 

More info about the position parameter.

https://greensock.com/position-parameter

 

Happy tweening.

 

[Dipscom]

It is not that TweenMax doesn't allow you to tween more than one property at once in the same Three.js object it's the fact that the properties in Three are individual objects themselves, GSAP doesn't know they are related to the same parent entity, it only sees them as they are, individual objects.

 

I have never heard of insertMultiple(array) is that even a GSAP method? Where did you find it?

 

To me, it appears that your animation gets jittery after the first play because you have a bunch of Tweens running at the same time, somehow, inside the timeline but that are not children of the timeline.

 

However, if you were to create a mini-timeline for each of the sections you want to animate the position and rotation together and then, add that to the master timeline, you will see that the animation plays normally and repeats normally. You can even, instead of using a onComplete call, just use the repeat property from TimelineMax.

 

for (var i = 1; i < miroKeyframes.length ; i++) {
  var keyframe = miroKeyframes[i]; //current keyframe
  var dur = keyframe.t - miroKeyframes[i-1].t ; //auto-duration
  
  var tl2 = new TimelineMax();
  
  tl2.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, z:keyframe.r.z, ease:Sine.easeIn}, 0 );
  tl2.to( obj.position, dur, { x:keyframe.p.x*20, y:keyframe.p.y*20,  ease:Sine.easeIn}, 0);
  
  tl.add(tl2);
}

 

[Dipscom]

@PointC sneaky!

[PointC]

[mirohristov]

Thank you guys for the quick responses.

 

@Dipscom, your solutions works like a charm. I didn't know you could add mini-timelines to a main one. Thank a lot! 

44 minutes ago, Dipscom said:

I have never heard of insertMultiple(array) is that even a GSAP method? Where did you find it?

 

I got that from this tutorial on three.js and GSAP.

 

@PointC, My bad. Your solution also works great! I just didn't notice you used the position in both lines. I had to change it to p.x and r.x

 

  tl.to( obj.position, dur, { x:keyframe.p.x*10, y:keyframe.p.y*10, ease:Sine.easeIn }, "label" + i );
  tl.to( obj.rotation, dur, { x:keyframe.r.x, y:keyframe.r.y, ease:Sine.easeIn }, "label" + i );

 

 

I'll definitely look into labels. The more I learn about GSAP the more I love it

 

Respect!

[GreenSock]

54 minutes ago, Dipscom said:

I have never heard of insertMultiple(array) is that even a GSAP method? Where did you find it?

 

It's a remnant from the old ActionScript API. We've simplified things quite a bit since then, and the add() method is much easier. We silently supported insertMultiple() and some of the other legacy methods just for backward compatibility. But I wouldn't recommend using them. 

 

@mirohristov glad to hear you're enjoying the tools! Good luck with the project. Let us know if you need anything else. Oh, and I'd highly recommend this article because it can revolutionize your animation workflow:

https://css-tricks.com/writing-smarter-animation-code/

 

(Code/Demos from @PointC are featured there). 

 

And I "whipped together" a plugin that might make working with Three.js easier - it's in this thread: 

 

Happy tweening!

[PointC]

43 minutes ago, mirohristov said:

@PointC, My bad. Your solution also works great! I just didn't notice you used the position in both lines. I had to change it to p.x and r.x

 

 

Yeah, that's my fault. I copied and pasted something you had commented out without paying attention to the actual tween vars. I was just focused on the position parameter.

 

My solution and @Dipscom's solution are doing the same thing. He's adding two tweens to each nested timeline and having them both start at a position parameter of 0. The nested timelines are then played in sequence. My solution just adds all the tweens to the main timeline but each pair has the same label so they play at the same time. Make sense?

 

Happy tweening.