Jump to content


TimelineMax.set not working as expected

Recommended Posts

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?


Link to comment
Share on other sites

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.





  • Like 1
Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.



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 }})


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.