Jump to content
Search Community

Gsap in Playcanvas framework: is it possible? How to set up?

Babilux test
Moderator Tag

Recommended Posts

Hello,

 

I was wondering if we can add the GSAP lib to a PlayCanvas project? I would have the benefit of GSAP tweens in PlayCanvas instead of the tween.js or their in-house tweener.

How is it possible or not? Which file / folder should I add to make this work ?

 

Best

 

Link to comment
Share on other sites

Hey Babilux and welcome to the GreenSock forums.

 

GSAP works with any JavaScript objects, so you can very well use it with PlayCanvas. With that being said, PlayCanvas is set up to work with their tween.js library so you'll likely have an easier time using it rather than GSAP, especially if you're exporting things from their visual editor. 

 

As for the benefit of using GSAP, there are many features that GSAP offers. I've never used PlayCanvas or their tween.js before, but looking at it I would opt for GSAP's API syntax over theirs if I had the choice and all other things were equal. But all other things are not equal. 

Link to comment
Share on other sites

Thanks for this good news! I definitly prefer to go with Gsap as there is a lot of feature which would be pretty usefull.

Tween.js is fine for basic movement but when we start thinking "moving along path" , "rotate with various pivot" and so on, Tween.js start to be out of scope.

 

I don't mind not having a visual editor of tweenlite / gsap as long as I can see how to hardcode a movement directly in a script :)🙃😇

 

I 'm trying to figure out how to implement Tweenlite and Tweenmax , or  gsap in a basic playcanvas project,

but  I'm not sure about which lib to put in the script folder.

Is it the gsap-core.js? or talking about tweenlite, is it TweenLite.min.js ? is it enough or should I add more to get the easing feature  , plugin.

 

If someone could create a quick andvery basic project to fork on playcanvas It would be really hepfull.

let's say a cube moving from a place  to another with a easing effect and a callback to another func "log ( "done") 

 

Best!

  

Link to comment
Share on other sites

1 hour ago, Babilux said:

I 'm trying to figure out how to implement Tweenlite and Tweenmax

Don't do that - make sure you're using GSAP 3 which doesn't have the Lite/Max stuff. All you need for basic tweens is the core GSAP file.

 

1 hour ago, Babilux said:

If someone could create a quick andvery basic project to fork on playcanvas It would be really hepfull.

How about you create a basic PlayCanvas scene with a cube without any movement and share that with us? I am not aware of any regulars here who use PlayCanvas regularly.

Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

Don't do that - make sure you're using GSAP 3 which doesn't have the Lite/Max stuff. All you need for basic tweens is the core GSAP file.

 

How about you create a basic PlayCanvas scene with a cube without any movement and share that with us? I am not aware of any regulars here who use PlayCanvas regularly.

Gotcha. It was just in case it would be "more" compatible as it's a bit older.

 

So here you go for a tween base on Tween.js  ( script attached to a cube in playcanvas). 

Tween Js allow to have attributes in the visual editor to be userfriendly. 

 

I would especially know how we do the same by calling a gsap3 tween , or a tweenlite ( even if deprecated)

 

 

var TweenPosition = pc.createScript('tweenPosition');

TweenPosition.attributes.add('duration', {type: 'number', default: 1.0});
TweenPosition.attributes.add('easing', {type: 'string', default: 'Linear'});
TweenPosition.attributes.add('delay', {type: 'number', default: 0});
TweenPosition.attributes.add('loop', {type: 'boolean', default: true});
TweenPosition.attributes.add('yoyo', {type: 'boolean', default: false});
TweenPosition.attributes.add('repeat', {type: 'number', default: 2});

TweenPosition.prototype.initialize = function() {
    // create our tween
    this.reset();
    
    // handle attribute changes
    this.on('attr:duration', function (value) {
        this.tween.duration = value;
    }, this);
    
    this.on('attr:easing', this.reset, this);
    this.on('attr:delay', this.reset, this);    
    this.on('attr:loop', this.reset, this);    
    this.on('attr:yoyo', this.reset, this);    
    this.on('attr:repeat', this.reset, this);
};

TweenPosition.prototype.reset = function () {                   
    // if we are already tweening then stop first
    if (this.tween) {
        this.tween.stop();
    }
    
    // reset our position
    this.entity.setLocalPosition(-4, 0, 0);
    
    // create a new tween using our script attributes
    this.tween = this.entity.tween(this.entity.getLocalPosition())
        .to(new pc.Vec3(4, 0, 0), this.duration, pc[this.easing])
        .delay(this.delay)
        .loop(this.loop)
        .yoyo(this.yoyo);
    
    // only set repeats if loop is false
    if (! this.loop)
        this.tween.repeat(this.repeat);
    
    // start the tween
    this.tween.start();
};

 

Link to comment
Share on other sites

8 minutes ago, Babilux said:

It was just in case it would be "more" compatible as it's a bit older.

GSAP 3 is supported all the way back to IE9. I doubt you'd need support better than that :) 

 

8 minutes ago, Babilux said:

here you go for a tween base on Tween.js

Can you please create a complete minimal demo using something like CodePen for us to affect? I am unfamiliar with what is required to get the script that you provided running by itself.

Link to comment
Share on other sites

Codepen is more Canvas  CSS HTML oriented. 

I can let this demo with a public status  that as been done with Tween.js on Playcanvas

let me know if you access it ( perhaps you 'll need to create a playcanvas account, I'm not sure)

https://playcanvas.com/editor/project/749597

 

just to mention , the code above is the tween-position.js file attached to the object.

 

preview below

Screen-2020-12-23_22-12-20.thumb.jpg.8619dc2b7288edc3388aa9ee9232c84c.jpg

 

Link to comment
Share on other sites

Asking us to learn how to use their editor to show you how to set things up is a bit too much for what we're able to do for free for you in these forums. Perhaps if you provided the rendered output that we could also edit we could more easily show how to animate things? Otherwise you could perhaps hire someone to figure out how to set up GSAP in the editor itself.

Link to comment
Share on other sites

I'm a bit shoked of such an answer especially when coming from moderator.. There is million of people who had seen that as  an opportunity to show how agile is a thirdparty toolkit over various context of production and eco-system, and you, you  reply like I'm asking too much things...come on..

I don't get the point of "you could perhaps hire someone to figure out" , that's quite disapointing and absolutely counter way to the fundamentals of a tech forum .

If by chance another person following this forum have given a try to run Gsap on playcanvas that could be great then .

Thank you

Link to comment
Share on other sites

I'm sorry it's disappointing. But we simply do not have the capacity to learn every tool/editor/whatever that people reference in these forums. We're happy to answer any GSAP-related questions that you have. As you can tell from the 120k+ posts in these forums, we spend a whole lot of time helping people :) We do have to draw the line somewhere or else we couldn't get other work done (making improvements to GSAP, adding new plugins, creating tutorials, etc.). 

 

As I said in my last post, if you share a minimal demo of the rendered output I'm happy to take a look as to how GSAP can affect the objects that you have.

  • Like 2
Link to comment
Share on other sites

On 12/23/2020 at 3:13 PM, Babilux said:

let me know if you access it ( perhaps you 'll need to create a playcanvas account, I'm not sure)

https://playcanvas.com/editor/project/749597

 

Yeah, that link isn't visible - it forces people to sign up. 

 

55 minutes ago, Babilux said:

that's quite disapointing and absolutely counter way to the fundamentals of a tech forum .

Gosh, I'm really sorry Zach's answer was disappointing. We try to bend over backwards to help people with GSAP-related questions...for free. Most people don't understand or appreciate just how much time and effort it takes to man these forums. A lot of questions aren't even GSAP-related - they boil down to "can you learn the ins and outs of this other 3rd party tool's API and tell me how to make it work?"  Those tools are often moving targets (they change their APIs frequently). And of course there's a constant stream of "new tools" (many of which get abandoned). GSAP has been around for 12+ years which is quite rare. We've built it to work with pretty much anything out there. A lot of animation tools are built for a particular framework which really limits you especially if that framework gets abandoned. 

 

Being forced to set up an account with a 3rd party tool that I've never heard of just to see what kind of code it outputs makes me pretty uncomfortable. But rest assured that GSAP can animate literally any property of any object that JavaScript can touch, so I can't imagine why you wouldn't be able to do it in Playcanvas. 

 

I think Zach's offer to dig into the exported code or a CodePen demo is more than you'd get in most forums, especially for free. And again, we'd love to help with any GSAP-related questions. 

 

Happy tweening!

  • Like 3
Link to comment
Share on other sites

Welcome to the GSAP forum @Babilux.

 

Maybe the following recent thread(s) and provided example on the PlayCanvas forum could help you.

https://forum.playcanvas.com/t/gsap-with-playcanvas-is-it-possible-to-use-it/16546

https://forum.playcanvas.com/search?q=gsap

 

There appears to be many other related discussions on their forum. A few concerning GSAP and many concerning tweens in general. Likeminded users with direct knowledge of PlayCanvas can assist you over there if you are unable to provide an exported example for people to assist you here.

 

But unless I'm mistaken it looks like you just need to feed the proper PlayCanvas 'Entity Properties' to GSAP.

  • Like 5
Link to comment
Share on other sites

Hi Jack! 

 

Well saying things frankly, Gsap is an awesome toolkit to speed up prod when we start talking about tweening and this since the epok of FLASH.

So indeed Kudoss for that! I do understand your point, having lot of support to do for such an amount of various Html5 eco-system  with various "engine" is a big challenge. 

I was surprised about the answer which was not reflecting the implication I feel you have on the tween topic.

Allow me to encourage you to take a look at Playcanvas  as it is one of the rare 3D html5 engine with a solid editor interface.

Bringing support on it on both side Playcanvas and Gsap forums would blend the power of all possibility of tweening with Gsap and the powerfull 3D functions of Playcanvas. Anyway... Not here to promote one or the other, but juste sharing my feeling of how powerfull it is to use both of them in the meantime.

We are not at a level of a Unity  engine editor but it goes that way and that's great for anymore who is looking for a solution not purely code oriented like Node.js or other.

 

That said, I found my answer: I share a few lines of code below to make run GSAP in a playcanvas script:

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

Basically you get the entity object and position  X,Y,Z with a Vec3() or  GetPosition() funct, then you run Gsap with a onUpdate to loop and refresh the movement till the end position requested ( y:4 , x2) . That was quiete easy but not exactly the same logic as usual when tweening with Gsap.

 

Best

Link to comment
Share on other sites

Glad to hear you found a solution. Excellent. You could make it even easier to work with if you create either a simple plugin or register an effect, like (untested - just to give you an idea):

 

// register the effect with GSAP:
gsap.registerEffect({
	name: "position",
	effect: (targets, config) => {
		let entities = targets.map(t => t.entity),
			positions = entities.map(e => e.getPosition()),
			onUpdate = config.onUpdate,
			tween;
		config.onUpdate = () => {
			entities.forEach((e, i) => e.setPosition(positions[i]));
			onUpdate && onUpdate.call(tween);
		};
		tween = gsap.to(positions, config);
		return tween;
	},
	extendTimeline: true, //now you can call the effect directly on any GSAP timeline to have the result immediately inserted in the position you define (default is sequenced at the end)
});

And then, all you'd need to do is this (usage): 

gsap.effects.position(this, {x: 2, y: 4, duration: 2.5, ease: "elastic(1, 0.3)"})

And it should work with staggering too. 

 

I hope that helps. 

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