Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'pixijs'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 20 results

  1. 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 !
  2. 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
  3. 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:()
  4. 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.
  5. 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 memor
  6. 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.
  7. 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 => { TweenLit
  8. 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, mayb
  9. 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 },'#
  10. 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
  11. 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 =>
  12. 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: Po
  13. 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 Mayb
  14. 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
  15. sirhclluk

    PixiPlugin 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
  16. 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
  17. 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
  18. Abel

    PixiPlugin Color

    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
  19. 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 mo
  20. 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,