jonForum

hey thank you so much, it better than nothing. ? I love your experimental tool and it awesome for help understand under-hood. I think it seem only label text are broken, it not show blueGreenSpin label position.

Hi , i use vivaldi it based on chromium same as chrome engine, but i also test in in fireFox, and Edge. The timeline playing, but i cant edit values ! But in you video , you do it in codePen i think and you are able to change values, is this link am not able to find. hum no code question here, am only ask to find the same interactive demo used in the video to learn. I try remove step by step and yes i found the issue, but am not understand why. And this is because i have maybe a bad English translator in my brain ? So if i play with interactive demo in you demo , am pretty sure i will understand all because am more visual and mechanic learning. The demo will allow me to test all context values for timeLine and also see my misunderstand of the under-hood behavior. You are super guys , but please dont wast your time to decode my code, it fully customized and i know these painful to read ! I just show full code to show full context and how i manage the timeLine. Not need to find a solution, this is my jobs ? Am pretty sure with a live demo with the visual timeline in the demo i will fully understand what i do wrong. Sorry again for my bad English and thank for your patience. ?

I use ` '#' ` for all tag animations anchor in my projet, it help me for read, find, search specific key. It's also a charcode use for jump on anchor in html page if i remember https://help.typepad.com/anchor-tags.html Sorry i forget remove it, the .repeat(-1).repeatDelay(1) are only here for debug and see animation in loop because my eyes are bad ? if i use 'atk+=0.2' i get strange result on the repeat debug, but it seem work with +0.2 thank good to know, it very nice tuto

hi, hum , i follow recommendation about to split my timeLine in functional code. https://css-tricks.com/writing-smarter-animation-code/ This it was my behavior i expect but code was unreadable "too Complexe to manage" now i re-factorize all animation in function and i get more powerful manager and readable. But am get weird behavior and i need test and play with timeline demo to understand what append here and how i can fix this !, I try many hack but am not able get what i expect const master = new TimelineMax({paused: true}).repeat(-1).repeatDelay(1); master.add( sourceBackAtk(),'#focus'); master.add( sourceAtk(),'#atk'); master.add( showDammage(),`#atk+0.2`); if(items){ // if items? hack the timeline master.add( itemFocus(),'#focus'); master.add( itemTrow(),'#atk+0.2'); // shoud play at #atk +0.2 ? master.add( itemFall()); // shoud play after 'itemTrow' ? } Fully code are here , but am not able to create a demo with , it will take me a fully day ! But am pretty sure it my label showDammage that *%$# all because am not understand timeline in deep ! I think the interactive demo should help me a lot. actionPlay_attack(action){ const source = action.source; const target = action.target; const actionSetup = $states.getActionSetupFrom(source, target, action.type); const damages = this.computeDammage(source,target,actionSetup); const items = action.items && $huds.combats.addItemSlotToRegisterMap(action.source); const tCollide = ((target.p.width/2)+(source.p.width/2))*(source.p.x<target.p.x?-1:1); // collid restriction with reverse ? source.p.position.zeroApply();//zero position de retour //!Step:ANIMATION FOR ITEMS MODE const rev = source.isRevers && -1 || 1; const sXY = source.p.position.clone();// source XY const tXY = target.p.position.clone();// target XY const dX = source.p.x-target.p.x; // distance X from source et cible const dY = source.p.y-target.p.y; // distance Y from source et cible const tWH = target.p.getBounds(); // target width height (compute camera) const sWH = source.p.getBounds(); // source width height (compute camera) //const tl = new TimelineLite({paused:true,repeat:4}); const speed = 1; //?TODO: need sync with spine2d need study? const ih = 75; // constante items height from size : help math performance const itPositions = items.map(it => it.position); const itScales = items.map(it => it.scale ); ///////////////////////////////////////////////////////////////////////////// function sourceBackAtk(){ const tl = new TimelineMax(); tl.call(() => { $camera.moveToTarget(source,8,5); },null,null,'#TargetHitItem') // TODO: AJOUTER UN SYSTEM TIMELINE POUR CAMERA AVEC += -= tl.call(() => { const entry = source.s.state.setAnimation(3, "atk0", false); } ,null,null) .to(source.p.position, 0.5, {x:`-=${120*rev}`, y:`-=${dY/2}`, ease: Expo.easeOut } ) return tl; }; function sourceAtk(){ const tl = new TimelineMax(); tl.call(() => { $camera.moveToTarget(target,10,2.5,Power4.easeOut); },null,null) tl.to(source.p, 0.1, {x:target.p.x+tCollide, y:target.p.y, zIndex:target.p.y+1, ease: Power4.easeNone }) tl.call(() => { target.s.state.setAnimation(3, "hit0", false) },null,null) tl.to(source.p, 1, {x:`+=${30*rev}`, ease: Power2.easeOut }) return tl; }; function itemFocus(){ const tl = new TimelineMax() tl.to(itPositions, 0.5, {x:`+=${30*rev}`, y:(i,it)=>`-=${dY/2+(100+ih*i)}`, ease: Back.easeOut.config(1.4) },0) .fromTo(items, 1, {rotation:Math.PI*2},{rotation:()=>Math.randomFrom(0,4,2), ease: Back.easeOut.config(1.4) },0) tl.to(itScales, 0.3, {x:1, y:1, ease: Back.easeOut.config(4) },0) return tl; }; function itemTrow(){ const tl = new TimelineMax(); tl.to(items, 0.2, {x:tXY.x ,y:tXY.y-tWH.height/2,zIndex:target.p.y+1, ease: Back.easeIn.config(1) },0 ) // projet vers target .to(itScales, 1, {x:'+=1' ,y:'+=1', ease: Elastic.easeOut.config(1, 0.3) },0.2) .to(items, 1, {rotation:()=>`+=${Math.randomFrom(1,15)}`, ease: Expo.easeOut },0.2 ) // when fall from ran rotation, hit with *-1 .to(itPositions, 1, { y:tXY.y-tWH.height, ease: Expo.easeOut },0.3 ) .to(itPositions, 1, {x:(i)=>`+=${((ih*i)+50)*rev}`, ease: Power4.easeOut },0.3 ) // imercy on hit ==>> return tl; }; function itemFall(){ const tl = new TimelineMax(); tl.addLabel( '#hit', 0.4 ) // target Hit by items tl.addLabel( '#bounce', 0.7 ) // items start falling tl.to(itScales, 0.4, {x:1 ,y:1, ease: Expo.easeIn },0 ) tl.to(itPositions, 0.4, {x:`+=${30*rev}`,y:tXY.y, ease: Expo.easeIn },0 ) items.forEach(it => { const rr = Math.randomFrom(-4,10,2); // random rotation const rx = Math.randomFrom(4,10)*-rr // random X sol (dir from ran rot) const rt = Math.randomFrom(0,0.3,2); // ran time tl.to(it, 0.4, {rotation:()=>`+=${rr}`, ease: Expo.easeIn },0 ) // when fall from ran rotation, hit with *-1 tl.to(it.position, 0.3, {x:(i)=>`+=${rx}`, y:'-=50', ease: Power2.easeOut },'#hit') // items hit gound and start fake Physic .to(items, 0.6+rt, {rotation:()=>`+=${rr*-1}`, ease: Power2.easeOut },'#hit' ) // when fall from ran rotation, hit with *-1 tl.to(it.position, 0.4+rt, {y:target.p.y, ease: Bounce.easeOut },'#bounce' ) // Y .to(it.position, 0.6+rt, {x:`+=${rx/2}`,ease: Power2.easeOut },'#bounce' ) // X }); return tl; }; function showDammage(){ const tl = new TimelineMax(); const txt = new PIXI.Text(damages.total,$txt.styles[3]); txt.anchor.set(0.5,1); txt.convertTo2d(); txt.proj._affine = 5 tl.call(() => { txt.position.copy(tXY); $stage.scene.addChild(txt) }) tl.to(txt.position, 1, { x:'+=65', y:`-=${tWH.height}`, ease: Expo.easeOut },0); tl.fromTo(txt.scale, 2, { x:0,y:0},{ x:2,y:2, ease: Elastic.easeOut.config(1.2, 0.3) },0); tl.fromTo(txt, 2.5, { rotation:-4},{ rotation:0, ease: Elastic.easeOut.config(1.6, 0.6) },0); tl.to(txt, 1, { x:"+=40", y:"-=20", alpha:0, ease: Expo.easeOut, delay:2, onComplete: () => { txt.parent.removeChild(txt); }, }); return tl; }; const master = new TimelineMax({paused: true}).repeat(-1).repeatDelay(1); master.add( sourceBackAtk(),'#focus'); master.add( sourceAtk(),'#atk'); master.add( showDammage(),`#atk+0.2`); if(items){ // if items? hack the timeline master.add( itemFocus(),'#focus'); master.add( itemTrow(),'#atk+0.2'); // shoud play at #atk +0.2 ? master.add( itemFall()); // shoud play after 'itemTrow' ? }

hi guys, the guy in this video say it give the interactive demo to play and understand the timeline https://greensock.com/position-parameter but i cant found the link ? and the demo on page are not interactive and i cant edit the code ! I'm afraid to look a little idiot but someone could provide me the link from this demo, because that's guy does not give a solution about the issue from 6:40 So i need the demo to try understand how solve this issue i also get in my engine , thanks and sorry if is a misunderstand from my English.

yep thanks , i choose a hybride way with forEach am no fan about scope function in method. I was able thanks to the system of Label i n your engine, well structure my animations. being alone I sometimes come back several weeks on codes structure, i just wanted sela remains readable and easy to debug. From my point of view it satisfies me and seems to me to be easy to read and to interpret the timeLine with addLabel, And i also solve my fake physic item on the grounds with a forEach. I will keep this system, thank you to guide me to the right track. /** Execute une Action de type attack avec ces configuration options */ actionPlay_attack(options){ const items = options.items && $huds.combats.addItemSlotToRegisterMap(options.source); const source = options.source; const target = options.target; const tCollide = ((target.p.width/2)+(source.p.width/2))*(source.p.x<target.p.x?-1:1); // collid restriction with reverse ? source.p.position.zeroApply();//zero position de retour $camera.moveToTarget(target,8,5); //!Step:ANIMATION FOR ITEMS MODE const tl = new TimelineLite({paused:true}); const speed = 1; //? need sync with spine2d need study? if(items){ const ih = 75; // constante items height from size : help math performance tl.addLabel('#itemFocus', 0 ) // start item move and focus to source .addLabel( '#HitItem', 0.6 ) // source hit items and project to target .addLabel( '#TargetHitItem', 0.7 ) // target Hit by items .addLabel( '#ItemFall', 1 ) // items start falling .addLabel( '#ItemHitGround', 2 ) // items hits grounds and bouncing tl.call(() => { source.s.state.setAnimation(3, "atk2", false) }) .to(items.map(it => it.position), 0.5, {x:'+=150', y:(i,it)=>`-=${100+ih*i}`, ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.5, {x:'+=1', y:'+=1', ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.3, {x:1, y:1, ease: Back.easeOut.config(4) }) .fromTo(items, 1, {rotation:Math.PI*2},{rotation:()=>Math.randomFrom(0,2,2), ease: Back.easeOut.config(1.4) },'#itemFocus') //HitItem .call(() => { target.s.state.setAnimation(3, "hit0", false) },null,null,'#TargetHitItem') .to(items.map(it => it), 0.1, {x:target.p.x ,y:target.p.y-(target.p.height),zIndex:target.p.y+1, ease: Back.easeIn.config(1) },'#HitItem' ) // projet vers target .to(items.map(it => it.scale), 1, {x:'+=1' ,y:'+=1', ease: Elastic.easeOut.config(1, 0.3) },'#TargetHitItem' ) .to(items.map(it => it.position), 1, {x:(i)=>`-=${tCollide/2-ih*i}`, y:`-=${target.p.height}`, ease: Expo.easeOut },'#TargetHitItem+=0.1' ) .to(items.map(it => it.scale), 1, {x:1 ,y:1, ease: Expo.easeIn },'#ItemFall' ) .to(items.map(it => it.position), 1, {y:target.p.y, ease: Expo.easeIn },'#ItemFall' ) // fall down // bouncing ground items.forEach(it => { const rx = Math.randomFrom(-20,50); const rr = Math.randomFrom(1,4,2); tl.to(items, 1, {rotation:()=>`+=${rr}`, ease: Expo.easeIn },'#ItemFall' ) // when fall from ran rotation, hit with *-1 tl.to(items, 1, {rotation:()=>`+=${rr*-1}`, ease: Power2.easeOut },'#ItemHitGround' ) // when fall from ran rotation, hit with *-1 tl.to(it.position, 0.3, {x:(i)=>`+=${rx}`, y:'-=50', ease: Power2.easeOut } ,'#ItemHitGround' ) // items hit gound and start fake Physic .to(it.position, 0.6, {y:target.p.y, ease: Bounce.easeOut },'#ItemHitGround+=0.3' ) // Y .to(it.position, 1, {x:`+=${rx*0.6}`,ease: Power2.easeOut },'#ItemHitGround' ) // X }); }; //!Step: ANIMATION FOR PHYSICS const timeA = items&&2.1||0; tl.addLabel('#physicBack', timeA ) // start physic attaque from 0 or 3 if items tl.addLabel('#physicAttack', timeA+0.6 ) // start physic attaque from 0 or 3 if items tl.addLabel('#physicHit', timeA+0.6+0.2 ) // start physic attaque from 0 or 3 if items tl.addLabel('#backToCase', timeA+0.6+0.2+0.6 ) // start physic attaque from 0 or 3 if items .to(source.p.position, 0.2, {x:'-=100', ease: Back.easeIn.config(1) },'#physicBack' ) .call(() => { source.s.state.setAnimation(3, "preparAtk", false) },null,null,'#physicBack') .call(() => { $camera.moveToTarget(source,8,1, SlowMo.ease.config(0.5, 0.7, false) ) },null,null,'#ItemHitGround') tl.call(() => { source.s.state.setAnimation(3, "atk1", false) },null,null,'#physicAttack') .to(source.p, 0.2, {x:target.p.x+tCollide, y:target.p.y, zIndex:target.p.y+1, ease: Power4.easeOut },'#physicAttack' ) .call(() => { $camera.moveToTarget(target,7,1,Power4.easeOut); },null,null,'#physicAttack') .call(() => { target.s.state.setAnimation(3, "hit1", false) },null,null,'#physicHit') // hit tl.to(source.p, 1.2, {x:source.p.position.zero.x ,y:source.p.position.zero.y, zIndex:source.p.position.zero.y, ease: Power4.easeOut },'#backToCase' ) .call(() => { source.s.state.setAnimation(3, "backAfterAtk", false); //FIXME: moteur spine plus simple pour animation baser sur $player source.s.state.addEmptyAnimation(3, 0.3 ); target.s.state.addEmptyAnimation(3, 0.3) } ,null,null,'#backToCase') .call(() => { $camera.moveToTarget(source.inCase,7,3); } ,null,null,'#backToCase+=0.1') .call(() => { this.endTurn() } ,null,null,'#backToCase+=2'); //! end turn tl.play(); //DELETEME this.actionsTimeLine = null; this._busy = false; }; The general idea it to have one universal method to manage my combat engine for all character. Thank all for you help

ho thanks , CustomBounce and wiggle-bounce seem to be what am searching for , thanks for the fast answer i will study this ! I will also look if am able to make a simple demo with my customs API.

Am trying experiment fake physic correlation with math random and bouncing tween. But am not realy satisfying from the result . Do existe some codePen example where poeple emulate fake physic bouncing on ground with timeLine ? I can not get a dynamic result that will more naturally lead to the percussion of the ground. this is how i approche the timeline animation for now. const tl = new TimelineLite({paused:true}); const speed = 1; //? need sync with spine2d need study? if(items){ const ih = 75; // constante items height from size : help math performance tl.addLabel('#itemFocus', 0 ) // start item move and focus to source .addLabel( '#HitItem', 0.6 ) // source hit items and project to target .addLabel( '#TargetHitItem', 0.7 ) // target Hit by items .addLabel( '#ItemFall', 1 ) // items start falling .addLabel( '#ItemHitGround', 2 ) // items hits grounds and bouncing tl.call(() => { source.s.state.setAnimation(1, "atk2", false) }) .to(items.map(it => it.position), 0.5, {x:'+=150', y:(i,it)=>`-=${100+ih*i}`, ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.5, {x:'+=1', y:'+=1', ease: Back.easeOut.config(1.4) },'#itemFocus') .to(items.map(it => it.scale), 0.3, {x:1, y:1, ease: Back.easeOut.config(4) }) .fromTo(items, 1, {rotation:Math.PI*2},{rotation:()=>Math.randomFrom(0,2,2), ease: Back.easeOut.config(1.4) },'#itemFocus') //HitItem .to(items.map(it => it.position), 0.1, {x:target.p.x ,y:target.p.y-(target.p.height/2), ease: Back.easeIn.config(1) },'#HitItem' ) .to(items.map(it => it.scale), 1, {x:'+=1' ,y:'+=1', ease: Elastic.easeOut.config(1, 0.3) },'#TargetHitItem' ) .to(items.map(it => it.position), 1, {x:(i,it)=>`-=${ih*i}`, y:`-=${target.p.height}`, ease: Expo.easeOut },'#TargetHitItem+=0.1' ) .to(items.map(it => it.scale), 1, {x:1 ,y:1, ease: Expo.easeIn },'#ItemFall' ) .to(items.map(it => it.position), 1, {y:target.p.y, ease: Expo.easeIn },'#ItemFall' ) // fall down // bouncing ground items.forEach(it => { const rx = Math.randomFrom(-20,50); tl.to(it.position, 0.3, {x:(i)=>`+=${rx}`, y:'-=50', ease: Power2.easeOut } ,'#ItemHitGround' ) // items hit gound and start fake Physic .to(it.position, 0.6, {y:target.p.y, ease: Bounce.easeOut },'#ItemHitGround+=0.3' ) // Y .to(it.position, 0.6, {x:`+=${rx*0.6}`,ease: Power2.easeInOut },'#ItemHitGround+=0.3' ) // X }); The physic bouncing start at label `#ItemHitGround`. Maybe i do something wrong with math ? note: am not using any physics engine in my projet, i just want simulate fake physic with easing when i need. thanks

I was using the loop for my first experience, but I just wanted to know if I could further reduce the code to avoid that. But I'm fine, I think I do not have a choice, but my animation is complex and merges with the animation of the spine2D API. It can be difficult to read code that is too complex. I was looking for some technical pro to minimize the readability of your API. i just also found the tricks with addLabel thats help a lot i make more readable the animation for me const tl = new TimelineLite({paused:true}); const speed = 1; //? need sync with spine2d need study? if(items){ tl.addLabel('#item', 0 ) // start item move to player glove .addLabel( '#Hit1', 0.4 ) // source hit items and project to target for (let i=0, l=items.length; i<l; i++) { const it = items[i]; //TODO: ADDlABELS method avant serait plus simple ? tl.to(it, 0.5, {x:'+=150',y:`-=${100+((it.height/2)*i)}`, ease: Back.easeOut.config(1.4) },'#item') .from(it, Math.randomFrom(1,2), {rotation:Math.randomFrom(Math.PI,Math.PI*3), ease: Power4.easeOut } ,'#item') .to(it.scale, 0.2, {x:0.8,y:0.8, ease: Power4.easeOut },'#item') .from(it.scale, 0.3, {x:1.4,y:1.4, ease: Back.easeOut.config(4) },'#Hit1') .to(it.position, 0.12, {x:target.p.x , y:target.p.y-(target.p.height/2), zIndex:target.p.y+1, ease: Back.easeIn.config(1) },'#Hit1+=0.15' ) }; tl.call( () => { $player.spine.s.state.setAnimation(3, "atk2", false); },null,null,'#item+=0.15') // hit .call(() => { $camera.moveToTarget(target,7,1,Power4.easeOut); },null,null,'#Hit1+=0.1') // hit } tl.play();

ok thank you, that makes sense to me. And It fine not need help for thats you explained me well.

other question ,it also possible to do this with duration? It work fine for properties but if i also want compute a random durations for each arrays instance ex : tl.to(items, ()=>Math.randomFrom(0.8, 1.2), // function duration not work {x:'+=180',y:(i,it)=>`-=${100+((it.height/2)*i)}`, ease: Back.easeOut.config(1.4) },'#item') and i also try pass a array buffer with random value, but array seem no take in count. hum.. let durations = Array.from({length:items.length},()=>Math.randomFrom(0.8, 1.2) ); tl.to(items, durations, // array durations not work {x:'+=180',y:(i,it)=>`-=${100+((it.height/2)*i)}`, ease: Back.easeOut.config(1.4) },'#item')

thank i love it

hi guys , what the good way to do this in a timeline ? .from([item1,item2,item3], 1, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') My arrays items are dynamic and never same, and i want to dispatch the random value in properties for each items in the array ? what the best way to proceed and for keep a good readable structure in the timeline. I can maybe do something like this , but it kind weird ! and ugly code. tl.call(() => { items.forEach(it => {tl.from(it, 0.2, {rotation:Math.randomFrom(1,4), ease: Power4.easeOut },'#item') }) },null,null,'#item') If you have some suggest, i take it

am experimenting with timeLine Exist a way to add a simple instance with callback but without target ? const actiontl = new TimelineLite(); actiontl.to(items, 0.2, {x:'+=140',y:'-=140', ease: Power4.easeOut },'#step1') .to(items.map(i => i.scale), 0.3, {x:0.8,y:0.8, ease: Elastic.easeOut.config(1, 0.3) },'#step1') .to(items, 0.1, {x:target.p.x ,y:target.p.y-(target.p.height/2), ease: Back.easeIn.config(1) } ) .to(null, 0, { onStart: () => { target.s.state.setAnimation(1, "hit1", false) } } ) //FIXME NO WORK ! .from(items.map(i => i.scale), 0.3, {x:2,y:2, ease: Power4.easeOut } ,'#hit') .from(items, 0.3, {rotation:4, ease: Power4.easeOut } ,'#hit') .to(items, 1, {x:'-=100' ,y:'-=150', ease: Expo.easeOut },'#hit' ) .to(items, 0.6, {x:'-=15' ,y:target.p.y, ease: Bounce.easeOut } ) So example here : .to(null, 0, { onStart: () => { target.s.state.setAnimation(1, "hit1", false) } } ) i found more readable to split my event from animation, but i get "Cannot tween a null target."; So if i understand we can no work like this , i need to add the event callback onStart in a valide timeline with target ? Or existe a way to use a empty timeline with only a event ? thanks

solved thank. Just remove 'Unscope' the declare namespace gsap { in all d.ts files, it work fine for me. and than you will get intellisense work fine for all projet without import module

thank i will do, and not i found anything that can cause this kind of behavior in gsap, and if you say you do nothing to force this kind of feature It will maybe something in vscode and my setup ! i will try check this in deeper. Thank for your answer.

i was think about gsap, because i not get this issue and behavior with other libs @type intalled in my node module. all other libs here dont do this behavior ! and the import feature is manually , not automatic. Only gsap do this !

Hi guys, i import the libs gsap from `npm` for only get @type description with intelisence. But each time i use the tweenLite or tweenMax, it add this line to top of my file import { TweenLite } from "gsap"; how i can remove this feature am pretty sure it comes from gsap because it not happen with my other npm libs @type . I use the npm only for get type description for intelisence, so i no need import each time i use it because am working on a node-webkit app, and i don't use import features, tweenlite are already injected in all the core app.. Also this should not happen because i exclude node_modules import in my jsconfig, but it seems no effect with your libs. ! { "compilerOptions": { "target": "ES6" }, "exclude": [ "node_modules","bower_components","temp","tmp","jspm_packages", "./js/__old/","./js/libs/" ] } thanks

nop it fine thank, I found it just painful not to have it in the doc, because I use a lot your online doc for search keyword that sometime I forget.

hi guys it seem the doc missing some option for deep callback setup. i found thoses in the API with vscode debugger,. onComplete:, onCompleteParams:, onCompleteScope: But I was found no information to help me on the events. It would be great to supplement the documentation. thanks

yep tru, i found TweenLite.killTweensOf([this.scale,this.sprites.c2.scale],true); Now i need found hacky wait to also kill delay:0.2, Because if i click super fast, it not kill the delays animations hum... edit: forget MEE it work if i remove true haha. thank guys this is solved.

Arf ok it seem i need store all thoses in a variable ? tween not have a native buffer for kill from the global TweenLite ?

hi guys how i can kill all current animation from target objet ? Related to doc , am not sure am understand. i get `TypeError: TweenLite.kill is not a function` so here the example what am target. Hold click will power Shake the hud. But if release click befor i click shakes animations, i want kills. So here my experiment When downClick pointerDW(e) { TweenLite.to(this.sprites.c2.scale, 0.2, { x: 3, y: 3, ease: Back.easeOut.config(1.7) }); this.sprites.c2.alpha = 0 TweenLite.to(this.sprites.c2, 1.3, { alpha: 1,rotation:Math.PI, ease: Power4.easeOut }); TweenLite.to(this.sprites.c2.scale, 1, { delay:0.2, x: 1.4, y: 1.4, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 3, points: 50, taper: "in", randomize: true, clamp: true}) }); TweenLite.to(this.scale, 0.2, { x: 0.75, y: 0.75, ease: Back.easeOut.config(1.7) }); TweenLite.to(this.scale, 1.2, { delay:0.2, x: 1.3, y: 1.3, ease: RoughEase.ease.config({ template: Circ.easeOut, strength: 2, points: 50, taper: "in", randomize: true, clamp: true}) }); this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: 0, y: 0, ease: SlowMo.ease.config(0.7, 0.7, false) }); }); }; and than, when release click i want kill all thoses. i use es6 decomposer the Error come from TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); pointerUP(e) { // kill all animations FIXME: ? TweenLite.kill(null, [this,this.sprites.c2,...this.slots]); // start new animations ...... from the cancel this.slots.forEach(slot => { TweenLite.to(slot.position, 1.2, { x: slot.position.zero.x, y: slot.position.zero.y, ease: Power4.easeInOut }); }); visual help .... thank for help

yes this look perfect for me thank a lot for your fast answer.

hey guys , how gsap work to tween with hex colors tint ? i get weird result. cs.tint = 0xffffff; // default TweenLite.to(cs, 0.6, { tint: 0x228200, // green ease: Power4.easeOut, }); Existe a native method to compute hex color transition and keep green transition? thanks