jonForum
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by jonForum
-
I read these tutorials a long time ago, maybe I will have to read them again to refresh my mind. I hoped to learn a new magic tricks here. But from my workflow and search, i don't think i have memory leak about my engine. the only issue with `this.tl.kill();` it will kill all tweening active. On my side i need take a look of specifiques tweens created in the streams. And they are created inside many promises and inside `tl.addCallback(() => ...`, promises, and i also keep somes tweens alives insides. But ref the timeLine in the class can be good , i will try to see if this can help! Am also pretty visual, if you know a good video tuto about this , i take! Thanks again Blake, your awesome. Edit: `the only issue with `this.tl.kill();`it will kill all tweening active.` oups sorry forget me about this !lol
-
tanks you blake this is a good answer. Only issue for search string, , is if i use a lot of comment, it also search in comment or local variables name. But if we can use old way , or parseEase look interesting thanks
-
hey zach, am starting study gsap3 this week, am sorry if my question are bad or noobs, but you're sure this is a good and more easy approach in workflow? I loved the objets ref because it allow me search all references in my engine where i use specific math ease. Example right click on Elastic here and click find all reference, i can found all Elastics tweening in my engines. In the example your show, from my know. vscode not allow to search all references by strings "Elastic". or "Power0","Power1","Power2".. The result give none. Or maybe i do something wrong ? I know window allow some deep search string that can help. but it not very productive So the string approach will break vscode intellisense for search math ease ?
-
hey guys, did you have a cool trick to search a specific tween in memory ? In a complexe deep events with multiple promises, i can destroy tweens but also keep some specific looping tween active ! And it become little bit hard when inside a breakpoint , to look and debug in memory if all go fine. You know when your search current active objects in memory. It hard to know what tween i need keep or release to gc. Did you have a tricks or maybe a thing we can do to know what tween are currently in memory when debuging? The example upper show me when snapp the memory, i have 10 tween in memory can't release in GC , and it hard to know wish and where the are come from. i was think about something like const t = TweenMax.staggerTo(container.children, 4, {x:()=>`+=${Math.randomFrom(4,-8)}`,y:()=>`+=${Math.randomFrom(7,-10)}`, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2); // this not work, but a kind of naming memory to easy search if the tween was destroyed in memory? t.memoryName('blablaMemoryID'); // create a easy search reference for debug only Because i notice some memory leak from my events, and am trying to debug, but it hard to know what,where,when, from in a complex and deep events with a lots of tweenings features.. What your suggest to me , did you have good trick to learn me. It will be very cool guys if you can release us a video to how debug memory for your tweens engines (tips tricks). or maybe your already have one i didnt seen! it could help to master the tween and the mistakes not to do, I'm sure I made a stupid mistake somewhere that causes me a memory leak. sorry if this is a stupid question or not related to your engine :), hope you can help me here. Also sorry for poor english, i try my best
-
in this case it not related with pixijs objects, i found very easy to use pixijs in gsap vanilla. The issue here is more about how i can manage and sync the spine animations with gsap timeLine. example here , we need play a lot of spine2d animations, if i change timeScale, or addPause, all thing because hard to manage. function jumpOutBed() { const startCase = $objs.LOCAL[25]; const tl = new TimelineMax(); tl.addCallback(() => { p0.s.state.setEmptyAnimation(4, 0.1); p0.s.state.setEmptyAnimation(3, 0.1); p0.s.state.setAnimation(3,"reversX",false) p0.s.state.addAnimation(3,"jump3",false,0) p0.s.state.addEmptyAnimation(3,0.1,0); },0); tl.to(p0.p.position3d, 0.4, {x:startCase.child.p.position3d.x,y:0,z:startCase.child.p.position3d.z, ease:Power4.easeIn },1); return tl; }; I will try think about a summary solution and add a short and clean demo as soon possible, i think it will more easy to understand with visual concept. thank you so much for your time.
-
no issue but very hard to manage, my brain burn when i need mix spine2d animations and timeline, i alway need use call or callback like this tl.addCallback(() => { spine.state.setEmptyAnimation(4, 0.1); ..... },0); ....... you can see some live demo here, it very similar to dragonBone if you know. https://pixijs.io/examples/#/plugin-spine/pixie.js the issue is i have some difficulty to sync animation with the spine engine. I alway need compute time manually and this make thing really hard. But yes it a good idea, i can maybe try made a live demo of user case for gsap and spine2d on codepen in few day.
-
hey guys do you think gsap3 can have some more easy support to help with spine2d animations events , or do you have example of good implementation and user case ? Am just curious ! http://esotericsoftware.com/spine-api-reference
-
did you already release a doc to start study ? https://greensock.com/docs/v3 seem not work.
-
ho **** , gsap.utils.pipe look very interesting and clean. I think i will put this in standby and wait a beta of gsap3 integration. the multiple imbrication codes upper $txt(id).then((value) => { $txt(id).then((value) => { $txt(id).then((value) => { $txt(id).then((value) => { //..... it a thing i would like to avoid But the pipe look very interesting, i think i can wait and see. thanks you guys for made awesome stuff like that !
-
I made you a fast screenRec to show you the current logic and user case, it hard to explain with my english. But it very important to me to do it in the best way before going too far in my events messages managers and *%$# my brain if i made a big mistake with your timeLine engine. The logic here, is example i call a events This event call Actions in game with your tween engine, and it also allow me to call another tween with message events. When message is end or the message choice is end, the promise return en continue next message or next action if need. So this should allow me to easily manage what happened in each events. Hope this screenRec can help you understand how i use your engine for my events. You can see near 0:37, when the timeLine debbuger reach end, it the current line upper you can see in action. I use confirm just for the test because my message engine are no finish yet, but it the same thing if i call a message with promise.
-
ho ok i see, yes thanks. I would have thought that without time marker, the callBack uses an automatic hierarchy and dont crush, according to their input, and the pause() make a similar behavior to a breakPoint. So i will probably use `+=0.001` for make easly events managing inside the timeLine. did you think it a good way ? can i have issue if i setup my events text engine like thats ? this way can allow me to easily change order if i need, it a good thing. function txt0() { const tl = new TimelineMax(); tl.addCallback(() => { tl.pause(); $txt(id).then((value) => {tl.resume() }); //call a txt event id },'+=0.001'); tl.addCallback(() => { tl.pause(); $txt(id).then((value) => {tl.resume() }); //call a txt event id },'+=0.001'); tl.addCallback(() => { tl.pause(); $txt(id).then((value) => {tl.resume() }); //call a txt event id },'+=0.001'); // .... more return tl; }; If you think you have a better cool way tell me.
-
hey hum interesting, hope to test if you made a good `Deprecation Warning:` tracking for v2tov3, because gsap are really deep integrate in my engine. For the example upper, am sorry i know how use promise, maybe i explain myself bad, i just don't understand why the console here show `0,2,1` In my logic , the `pause` and `resume` should make the console show `0,1,2` ! ? i also try with `tl.pause()` and same behavior.
-
What best way to make complexe text callBack (story) inside a time line ? currently this not work fine ! plz see : function txt0() { line:6 https://codepen.io/djmisterjon/pen/BaarKLL if you look console, it should show 0,1,2 ! but it seem buggy here. Are you able to show some versions on how to use that kind of stuff correctly ? I need a clean way because it a very complex system events managers.
-
Hey guys how i can tween elements from a center to extent egal distance to bounds elements ? Any pro type, i don't like the way i perform, do tween have some special solution or method to do this in optimal performance? In this example i just want do this but in better way. Move all sprite from center to bounds in egal distance! plz see line 18: https://codepen.io/djmisterjon/pen/ExYGryo Thanks in advance.
-
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 .
-
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`
