jonForum

There is so much great demo everywhere!, I think I ask my question too early. I will take some days to study all your API and experimente. I discovered through your demo and other interesting diferente techniques. I will come back to you when I will have a better knowledge base. Also thank a lot for the demo it help me a lot to understand, and ya easing inOut not work very good , it not same result from AE and spine2d. I think the real solution are inside basic math algorithms in interpretation. Also a another question: Am the only one? that shocks!!! that everybody use the method TweenMax.to If we take a look in the source code , this call and create a new huge constructor 'class' each time. Also people use it inside updates, loop and listener!!! Is it not ? more logical for the performances to initiate one time only this class ?, and then modify these parameters with a scope. He does not mention it at all in the docs, and seems to propose this way only. It not very performance friendly ? no. I understand for webDesigner, maybe .. thanks

@Sahil hope you will fine with copy forking your codepen. I have a question about merge or sequential animation. Am not sure if it called like that. I look for a way to compute a break direction for the path with easing. example if you click on square ,(square in my context represent Camera) And click again before the end of the path for change the square direction. The camera changes direction too dry! (break hard )! In fact I would like to simulate a little physics when I want to change the value of the path. Do you have native way with easing , to compute the hold and new direction simulatinous. (physic based on value) ? In fact i have coded my how camera befor in pure js for my tool (pixi Editor) dammit-me for not having found this super library, 4 months before!!! In the context you can see in action here my camera. Am re-code it with GSAP for now , and am look for a way to break direction with easing. look at 0:04 sec https://youtu.be/MpZD0E0_iKI it giving something like this let ScrollX = 0, ScrollY = 0; // scroll increase Ease let ScrollF = 0.1; // _displayXY power for scroll map let scrollSpeed = 20; // speed for map scrool const editorTiker = new PIXI.ticker.Ticker().add((delta) => { if(scrollAllowed){ let scrolled = false; (mX<10 && (ScrollX-=ScrollF) || mX>Scene_W-10 && (ScrollX+=ScrollF)) && (scrolled=true); (mY<15 && (ScrollY-=ScrollF) || mY>Scene_H-15 && (ScrollY+=ScrollF)) && (scrolled=true); scrolled && (ScrollF+=0.4) || (ScrollF=0.1) ; } TilesMap.pivot.x+=(ScrollX-TilesMap.pivot.x)/scrollSpeed; TilesMap.pivot.y+=(ScrollY-TilesMap.pivot.y)/scrollSpeed; }); Hope you understand my sad english tell me if you not understand.

@Sahil thank you so much , this it gold explanation. Now i understand very well.

thank a lot @Sahil // ┌------------------------------------------------------------------------------┐ // GLOBAL $$cam CLASS: _camera_ //└------------------------------------------------------------------------------┘ class _camera_{ constructor() { this.tiker = null; //pixi tiker if need this.tween = null; // tween stored each time scene reset }; }; $$cam = new _camera_(); console.log9('$$cam: ', $$cam); // $$cam.initialise(); _camera_.prototype.initialise = function() { // initialise setup the tween each time scene reset (store the new tileMap) this.tween = new TweenLite(SceneManager._scene._spriteset._tilemap, 0, { pixi:{pivotX:0, pivotY:0}, ease: Elastic.easeOut.config(1, 0.3), }); }; // $$cam.move(40,10,2); _camera_.prototype.move = function(x,y, dur) { if(!this.tween){this.initialise()}; this.tween.vars.pivotX = x; this.tween.vars.pivotY = y; this.tween._duration = dur; this.tween.play(); console.log('this.tween: ', this.tween); }; i have another noob question. For performance reasons, I want to setup a new instance of tween each time the scene is created with the new target map. In this example of how to initialize the tween, how can I set it up correctly? So if i call $$cam.move(40,10,2); the play() seem to do nothing, do i have a mistake? Do you have a recommended tutorial or thread based on this kind of use ? this.tween.vars.pivotX = x; this.tween.vars.pivotY = y; this.tween._duration = dur; this.tween.play(); this should do the jobs no ?

hi it possible to use chaining function ease instead of property ? What a read it that TweenLite.to(obj, 2, {pixi:{pivotX:x, pivotY:y},ease:Power2.easeOut}); but i look for a way to write the easing like this, with chaining ? I took this habit on an old Easing library. TweenLite.to(obj, 2, { pixi:{pivotX:x, pivotY:y} } ).ease(Power2.easeOut); Existe a way to write ease more eyes friendly ? thank Am new from some minute ago , so am studying this library:)