TimelineMax.set not working as expected

[SntsDev 0 Likes (Newbie)]

Hello there!

 

I'm using TimelineMax to make a sequence for 3D objects using Three.js. So far so good, when working with numerical properties of objects. But I'd like to set true/false properties and use the state of the timeline.

 

I know I can do my own functions (onComplete, onStart,...) but that requires me to keep control of the state while the timeline is playing, which is similar to create my own timeline function. The idea is to be able to scrub the playhead.

 

So I used .set, both in TimelineMax or TweenMax to no luck.

 

For instance:

tm = new TimelineMax({align: start});
tm.add( new TweenMax(camera.position, 10, {x:100, y:100, z:100}), 1); //Works well
tm.set(target, { visible: false }, 4); //Doesn't work
tm.add( TweenMax.set(target, { visible: false, immediateRender: false, delay: 4}, 0); //Neither
tm.add( TweenMax.set(target, { visible: false, immediateRender: false}, 4); //Neither

Any ideas?

Thanks

[OSUblake 9,990 Likes (Superhero)]

GSAP only works with numbers, so a plugin would be needed for that. You could also create a new property, and use a getter/setter to transform a number into a boolean. You can name it whatever you want, but something like this...

Object.defineProperty(MyClass.prototype, "visibleNumber", {
  get: function () { 
    return this.visible ? 1 : 0; 
  },
  set: function (value) {            
    this.visible = !!value;
  }
});

And you should be able to use it like this...

TweenLite.set(target, { visibleNumber: 0 }); // false
TweenLite.set(target, { visibleNumber: 1 }); // true 

Here's a post where I show how to do this for another library, but it will work exactly the same with Three.js. If your object has an alpha value, you could even do an autoAlpha property just like that.

 

https://greensock.com/forums/topic/15361-understanding-autoalpha/?p=66823

 

.

[GreenSock 8,117 Likes (Superhero)]

Blake's solution is a good one of course. Just to clarify, though, GSAP works with numbers and strings (that contain numbers)

 

But a plugin can do just about anything based on your own custom logic. 

[SntsDev 0 Likes (Newbie)]

Thanks Blake!,
I ended up doing something very similar, although I called it a "hack". I think that Greensock´s comment goes to the point. I'm going to develop a plug-in for Three.js objects and I'll post it here.

[OSUblake 9,990 Likes (Superhero)]

A plugin for three.js would be nice! I've answered a lot questions similar to yours that could be made much easier with a plugin. I always tell people that looking at this plugin for Pixi would be a good starting point as it's very similar to three.js. In Pixi, there are a lot of objects on a target with x and y values, requiring separate tweens, and Three is pretty much the same, but with x, y, and z properties.

https://github.com/noprotocol/gsap-pixi-plugin

 

With a proper plugin, something like this...

tl.set(target, { hack: 1 })
  .set(target.position, { x: 100, y: 100, z: 100 });

Could be simplified into something like this...

tl.set(target, { three: { x: 100, y: 100, z: 100, visible: true }})

.