jonForum

i don't know if is because canvas rendering by cpu or if is the GreenSock CustomWiggel but performance are very poor here. Very laggy and freeze on my AMD ryzen 16 core , gtx 1070 Hope it because no gpu render here ! Maybe use a webGL renderer here can help https://themoonrat.github.io/webgl-benchmark

yes it what am also think, but seem without success ! TweenMax.to(bunny, 0.6, { rotation: 0, ease: Elastic.easeOut.config(4, 0.6), }); sometime it seem work, sometime no ... , i can't get the correct feeling.

Thank you both. I took the time to study the demo 2, unfortunately they seem based on inertia with the x and y position. They are very impressive! but on my side, I can not use this logic of interpolation to reach my idea, I have to tween with this with the rotation, the radian and the pivot. As you can see, no position is used in the code code. My issue, in the codePen is this. When mouse stop move, it tween inertia the radian, but it not work fine. I may have a bad logic or approach... i really need when stop move the cursor, the item pinned give a more feeling of elastic . here the pen link : https://codepen.io/djmisterjon/pen/EJzBzV it should work ? i hope the gif can help to understand my issue I explain myself bad in english

Hi, am trying to tween little bit physic inertia when the mouse move. I don't know if is the good word in english. "inertness" ? My target it when mouse are move, the sprite follow the mouse with inertia on rotation values. But when mouse stop, call a elastic tween to give a physic feeling. The result are not optimal here , and maybe no very performance friendly. If any tweener or math pro can help me on this ? A made a codePen if you try Move mouse and stop it very fast , you will see the feeling am targeting. It not work all time this is also weird, maybe bad code or math logics here. Am no a pro in physic sorry. thanks a lot for any help guys https://codepen.io/djmisterjon/pen/EJzBzV .

yes thanks a lot for your time , i will probably add new polyfill in my project for do this.

ho ok this seem work const tl = new TimelineMax() tl.to(bar, 1, {rotation:-Math.PI/2, ease: Back.easeIn.config(1.4) },0) tl.to(bar, 1, {rotation:-Math.PI/2, ease: Bounce.easeOut },1/2) if any more easier suggest? i take it.

hum thank, but look too complicate to handle simply. What about this, it should not work? I would have thought that the timeLine will re-compute at in midway ? const tt = 1; const tl = new TimelineMax() tl.to(bar, tt, {rotation:-Math.PI/2, ease: Back.easeIn.config(1.4) },0) tl.to(bar, tt/2, {ease: Bounce.easeOut },tt/2) existe nor more easier ways than your demo ?

hi everybody, how proceed to mix diferente ease at start and end : i cant find doc? It possible ? Example: Something like thats, assuming the tween compute the half/time in the process ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:[Back.easeIn.config(1.2), Bounce.easeOut], }); or like this ? TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ start:Back.easeIn.config(1.2) , end:Bounce.easeOut }, }); or ... TweenMax.to(bar, 1, { rotation:-Math.PI/2, ease:{ '0':Back.easeIn.config(1.2) , '0.5':Bounce.easeOut }, }); or... TweenMax.to(bar, 1, { rotation:-Math.PI/2, easeIn:Back.config(1.2), easeOut:Bounce, });

Omg thats explain a lot, also the order affected if i switch. Thank a lot , thats demo help me a lot . My issue are solved by hack order and step , and now i understand more. i dont know why you have abandoned this demo ! it is frankly great to visualize basic behavior in real time and you could maybe made something realy great for newby. In all cases, thank you to you both for your patience and fast answer. @+

Just to be sure am understand the mathLabeling logique. is this behavior are ok in this context ? 'a+=0.2' at this position will move `b` to `a+0.2` ? and orange start play at end `a`

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.