Jump to content
Search Community

TimelineMax.set not working as expected

SntsDev test
Moderator Tag

Go to solution Solved by OSUblake,

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

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

Link to comment
Share on other sites

  • Solution

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

 

.

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

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

.

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.
×
×
  • Create New...