Gsap with Playcanvas? is it possible to use it

Help & Support
1

I would like to use the Gsap lib as we can do in Node, or Three.js but so far I don’t get exactly how to proceed to have Gsap using an object entity ( a cube , sprite etc…) in playcanvas as it does with a picture from HTML /CSS.
Is it at least possible?
I succeed in tweening onlly values of an object that I create containing numeric values. Not with an entity…

2

I made a quick example here animating an entity: https://playcanvas.com/editor/scene/1060225

3

OMG that was so simple :smiley:
Thanks for solving this puzzle yaustar !

5

What about multiple attributes?

6

What do you mean by multiple attributes? Such as X Y and Z at the same time?

7

one lil thing I’m wondering : what’s SELF stand for here?
I have to say I tryed to re-code with this.entity and have seen it does not work then.
I just would to clarify this question of the “this” or “self” usage here?

    gsap.fromTo(pos, {x: 0, y: 0.5, z: 0}, {duration: 2.5, ease: "elastic.out(1, 0.3)", y: 2, onUpdate: function() {
       self.entity.setPosition(pos);
    }});

btw , I tryed to use this logic with a simple gsap.to and it works like a charm .
Sharing it below :smiley:

   var pos = this.entity.getPosition();
    var self = this;
        gsap.to(pos,{duration: 2.5, ease: "elastic.out(1, 0.3)", y: 4,x:2, onUpdate: function() {
        self.entity.setPosition(pos);
    }});
8

This thread and resources example the scope concept on more detail

1 Like