Search the Community

any Ideas? https://codepen.io/Adventure-the-styleful/pen/RwqWNJg

Hey guys again hope you´re doing fine. I´ve had a great time with pixi and gsap over the past weeks and developed a tiny class for it. It will capture width and height of a selected element and appends a pixi generated canvas to it. A pixi container is stored inside filled with a matrix which represents the dimensions of the parent stage, but splitted to several smaller pieces (the gridDivider can be adjusted on class initialization on the bottom of the js). Now we have a prepared object with all needed references and it´s ready to apply some gsap goodness on it. Next I started with a Sub Class (HoverMatrixGrid) which captures data from the mousemove event and animate the "pixels". I created some animation blueprints with the mighty gsap.registerEffect(). and applied these as methods of the pixel object itself to alter states and get control over the animations. But atm the opposite is happening . I´m experiencing kinda artifacts / debris in the mousemove triggered animations, especially if you move the cursor diagonally some pixels on the edges don´t "fade out". If you swipe some seconds on the screen you will recognize them. I can imagine there is something wrong with my state handling, but can´t figure it out since days, so I want to ask if someone had experienced this behaviour. Is it something which comes from the asynchronous handling of object data? Are these states nescessary? It´s printing the generated "grid"-object with all it´s data and particles in the browser console. ps: congrats to your newest release (3.10)! Thanks, Richard

I have several simple multiplayer online games, and last two of them are card games. Several users complaint about very slow and annoying card movement, while others (including me) claims that all work just fine. Games are rendering with pixi.js, but for card movements I'm using GSAP 3.6.1 TweenMax. Luckily, one of players gave me access to her computer, and when we started the game and cards start moving, I could see WebGL warning messages: - GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to ReadPixels. - GL Driver Message (OpenGL, Performance, GL_CLOSE_PATH_NV, High): GPU stall due to mapping buffer in use my the GPU. Is this issue related to GSAP, or Pixi.js, or something else? It looks other games which are not using GSAP for movements work fine.

I want to add tension in the rope as the sprite travels through. Can you suggest, how can I achieve this?

Hello Greensock team ! I tried to achieve what i want before posting here, but finally need some help... Basically, I'd like to be able to drag a Pixi container with the Draggable plugin and inertia. Also note that the container is wider than the canvas, so have to correctly set the bounds. I tried with a proxy but can't figure out how to sync the container position with the proxy one. Any suggestion or example ? Thank you !

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

Hey any tips or suggest to perform a kind of reel infinite random motions? I find my approach too redundant. Example on text matrix? I get a random behavior, but alway same from looping ! this is currently the code startMotion(){ const List = this.child.Master.children; //words //!motions words if('option motions words'){ gsap.staggerFromTo(List, 0.5, {alpha:0},{alpha:1, ease: Power1.easeIn}, 0.4); gsap.staggerTo(List, 4, { x:()=>`+=${Math.randomFrom(4,-8)}`, y:()=>`+=${Math.randomFrom(7,-10)}`, ease: Power1.easeInOut, repeat:-1, yoyo:true}, 0.2); }; }; What i would like it a way to compute a random range from a radius ? but alway random after loop cycle. Do gsap have a native easy feature to perform this? suggest welcome

Hey is this a bug or a misunderstood feature. I have issue with overwrite. In this demo if we make {overwrite:true} The timeLineId 'action' should override the timeLineId 'pre' only at 3 seconde no ? And if we make {overwrite:false} The timeLine 'pre' will continue in background and make big spike after 'action'. https://codepen.io/djmisterjon/pen/VwwJeJQ would it be possible technically to make override only act when the child timeLine execute has 3 seconds? thanks for help or suggest.

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

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'm working on a project using ReactJS with Pixi & GSAP and the js library I'm using is called "react-pixi-fiber". I'm trying to reference the React Pixi Sprite object and handling the animation it using GSAP. However, it changes position without easing, and there's no error message showing. Code as below The "moveEle" function will be called from the parent component. class MainObject extends Component { constructor(props) { super(props); this.state = { ... }; this._refEle = React.createRef(); moveEle = options => { TweenLite.to(this._refEle, options.duration, { x: options.x, y: options.y, ease:Power2.easeOut }).play(); }; render() { return ( <Fragment key="MainElesFragment"> <Sprite ref={div => (this._refEle = div)} anchor={centerAnchor} texture={textureUrl} width={width} height={height} x={x} y={y} key="thisEle" /> </Fragment> ) } }

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 .

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 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

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

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

Hi guys, i search some code example on this forum, but i found nothing that show a Pendulum effect with tweenLite or with TimelineLite? Someone would have a functional example to create a permanent pendulum effect? My target it to get something similar that spine2D allow. for help to understand, i just want replace spine by vanilla js and vanilla tweenLite feature, because i get more performance after my test with tweenLite. But am not sure how do a pendulum loop with tweenLite. If you can provide me demos or link to the docs it will be wonderful Maybe i just don't get the good keyword for search! sorry again for poor english, thank guys.

Hi guys, what the best way to toggle (disable and active) rendering before animation. i have issue here if you fast click on interaction. I need active rendering before show , and disable rendering after hide. But if i fast click, i get issue. hope i explained myself good. Thank for help

I've looked at https://greensock.com/docs/Plugins/PixiPlugin and the codepen example. Could someone break it down super simple for me? What's the minimum code I need to blur the image using pixijs? Thank You! Chris

Hi Guys, I'm going to start work with game developing with best UI. But i confused which platform is best. because i heard about pixiJs or greensock as well can you please suggest to me which is the best. thanks, Divyesh Padamani

Hello. I tried to get a kind of focus helper with the mouse when the pointer rolls over an item. but i can get a good easing when the mouse are hover a element. I do not know if I explain myself well, but I will try. i use the pointerLock API. when the mouse icon get hover a new elements, i want to help the mouse to move to center of element. But without disturbing the control of the mouse. the idea is to create a focus helper to center the pointer on the elements when the mouse has a contact with the outlines. i try my best to make a codepen. for active the pointer lock, just click inside the blue square. if your move the mouse, your will see that the behavior is a little messy when the mouse flies over a white square. An idea on a good approach to create a similar system? thank a lot for help.

Hi All, I've been learning PixiJS, and I love it, but for some reason my ParticleContainer color is not changing?. All I'm getting is black, please let me know your thoughts I've pasted my code below for reference. var tlColor = new TimelineMax({ yoyo: true, repeat: 999, repeatDelay: 0 }); tlColor.to(particleContainer, 3, {pixi:{tint:0x6fbb4c}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0x4ec7f2}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xe6df36}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0x4c9f91}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xf98331}, ease: Cubic.easeOut }) .to(particleContainer, 3, {pixi:{tint:0xde1272}, ease: Cubic.easeOut }); Thanks

Hello everyone, I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature. For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path. The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP). You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button. Here's how my Bezier tween is written: path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}]; TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}}); If needed to be looked into a bigger scope, it's in my app.js file, line 182. What am I missing here? Thanks!

Hello, I used TweenLite and TimelineLite for a game project based on pixijs for graphics part. I did memory test on chrome and realised that when I create use tween / timeline for my sprites I have have leap sawtooth. Is there any pooling mecanism in the lib in order to reuse the tweens when there animation is complete. Cheers,