Search the Community

Showing results for tags 'gsap'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 6 results

  1. Hello! I'm find the perfect animation example but it works only on one image and in default mode (autoplay on page load). I need to init this only on mouseenter event and for each current image. This is example in codepen I'm found contidion to mouseenter and mouseleave event if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { slidesContainer.pointerover = function( mouseData ){ mouseX = mouseData.data.global.x; mouseY = mouseData.data.global.y; TweenMax.to( displacementFilter.scale, 6, { x: "+=" + Math.sin( mouseX ) * 100 + "", y: "+=" + Math.cos( mouseY ) * 100 + "" }); rotateSpite(); }; slidesContainer.pointerout = function( mouseData ){ TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } The default animation settings is: if ( options.autoPlay === true ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } I thought I can do something like this if ( options.interactionEvent === 'hover' || options.interactionEvent === 'both' ) { var ticker = new PIXI.ticker.Ticker(); ticker.autoStart = options.autoPlay; ticker.add(function( delta ) { displacementSprite.x += options.autoPlaySpeed[0] * delta; displacementSprite.y += options.autoPlaySpeed[1]; renderer.render( stage ); }); } This is pen with that "changed" part https://codepen.io/Frunky/pen/oMZbvr Also I need to load all items, but loads only one item. Why? Thanks
  2. 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. https://codepen.io/djmisterjon/pen/gzJVRR/?editors=1011 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? Am using GSAP libs. thank a lot for help. my source code am trying patch look like this , but it very similar to the code pen demo. /*: // PLUGIN □────────────────────────────────□MOUSE INTERACTIVITY□───────────────────────────────┐ * @author □ Jonathan Lepage (dimisterjon),(jonforum) * @plugindesc MOUSE ENGINE * V.0.1a * License:© M.I.T └───────────────────────────────────────────────────────────────────────────────────────────────────┘ Controle tous ce qui est associer a la sourits, interaction avec player et camera engine Initialise avantr le loader , seulement pendant la sceneBOOT */ // ┌-----------------------------------------------------------------------------┐ // GLOBAL $mouse CLASS: _mouse //└------------------------------------------------------------------------------┘ function _mouse() { PIXI.Container.call(this); }; _mouse.prototype = Object.create(PIXI.Container.prototype); _mouse.prototype.constructor = _mouse; $mouse = new _mouse(); console.log9('$mouse: ', $mouse); //$mouse.initialize() _mouse.prototype.initialize = function() { this.icon = null; this.x = this.y = 0; // mouse coor this.sensiX = this.sensiY = 0.8; this.dirH = this.dirV = 0; // direction hori, vert (4,6,2,8) base 10 this.screenX = 1600; this.screenY = 900; this.mouseIsDown = false; // mosue is down indicator // check if started path selector this.tweenLastCase = null; this.startedPathCase = null; // easing mouse this.tween = new TweenLite(this.position, 0, { x:0, y:0, ease:Power4.easeOut, }); this.createSpriteMouse(); this.createListener(); //this.debug(); // FIXME: REMOVE }; //┌-----------------------------------------------------------------------------┐ // $mouse.createSpriteMouse(); // create the sprite spine mouse and default animations //└-----------------------------------------------------------------------------┘ _mouse.prototype.createSpriteMouse = function() { const sprite = new PIXI.Sprite.fromImage('/img/mouse.png'); sprite.anchor.set(0.5,0); this.icon = sprite; this.iconLight = new PIXI.lights.PointLight(0xffffff,0.5); // the sceen FX sun this.addChild(sprite,this.iconLight); }; //┌-----------------------------------------------------------------------------┐ // $mouse.initialise(); // initialise mouse grafivs and all listener //└-----------------------------------------------------------------------------┘ _mouse.prototype.createListener = function() { // mouse listener document.addEventListener('mousemove', this.mousemove_core.bind(this)); document.addEventListener('mousedown', this.mousedown_core.bind(this)); document.addEventListener('mouseup', this.mouseup_core.bind(this)); document.addEventListener('wheel', this.wheel_core.bind(this)); // frames window listener //document.body.onwebkitfullscreenchange = this.windowResized; // FIXME: F4 FULL SCREEN VOIR LA REQUETE FAITE PAR RMMV document.body.onresize = this.windowResized; document.body.onblur = this.windowBlur; document.body.onfocus = this.windowFocus; }; //┌-----------------------------------------------------------------------------┐ // event: windowResized, _mouseblur, _mousefocus // listener related to fullScreenManager and the API pointer lock //└-----------------------------------------------------------------------------┘ _mouse.prototype.windowResized = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; _mouse.prototype.windowBlur = function(event){ document.exitPointerLock(); }; _mouse.prototype.windowFocus = function(event){ document.exitPointerLock(); document.body.requestPointerLock(); // pointlocker API }; //┌-----------------------------------------------------------------------------┐ // event: _mousemousemove // event that compute the current mouse position and move the icon //└-----------------------------------------------------------------------------┘ _mouse.prototype.mousemove_core = function(event){ // determine the direction this.dirH = event.movementX>0 && 6 || event.movementX<0 && 4 || 0; this.dirV = event.movementY>0 && 2 || event.movementY<0 && 8 || 0; this.x+=(event.movementX*this.sensiX); this.y+=(event.movementY*this.sensiY); // overScreen reasigment position this.checkOverScreen(); // check camera !this.mouseIsDown && $camera.onMouseMove(this.x,this.y); // check cases const inCase = $cases.onMouseMove(this.x,this.y, this.mouseIsDown); if(inCase && this.tweenLastCase !== inCase){ this.tweenLastCase = inCase; this.moveToCase(inCase,0.5) } console.log('inCase: ', inCase); if(this.startedPathCase && this.mouseIsDown){ this.computePath(); } }; _mouse.prototype.checkOverScreen = function(){ if(this.x>this.screenX){ if(this.dirH === 4){ return this.x = this.screenX; }; }else if(this.x<0){ if(this.dirH === 6){ return this.x = 0; }; }else if(this.y>this.screenY){ if(this.dirV === 8){ return this.y = this.screenY; }; }else if(this.y<0){ if(this.dirV === 2){ return this.y = 0; }; }; }; // $camera.moveToTarget(); _mouse.prototype.moveToCase = function(inCase, speed,ease) { console.log1('inCase: ', inCase.getGlobalPosition()); const p = inCase.getGlobalPosition() this.tween.vars.x = p.x; this.tween.vars.y = p.y+(inCase.heigth/2); speed && (this.tween._duration = speed); this.tween.invalidate(); this.tween.play(0); console.log('this.tween: ', this.tween); }; _mouse.prototype.computePath = function(){ if($cases.current){ // if case not exist in array, add it if(this.startedPathCase.indexOf($cases.current)<0){ this.startedPathCase.push($cases.current); } } }; //┌-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //└-----------------------------------------------------------------------------┘ _mouse.prototype.mousedown_core = function(event){ this.mouseIsDown = true; if($cases.current){ this.startedPathCase = [$cases.current]; $cases.onMousedown(); } }; //┌-----------------------------------------------------------------------------┐ // event: mousedown_core // event when mouse down //└-----------------------------------------------------------------------------┘ _mouse.prototype.mouseup_core = function(event){ this.mouseIsDown = false; if(this.startedPathCase){ $player.moveToCase(this.startedPathCase[this.startedPathCase.length-1]); this.startedPathCase = null; $camera.onMouseWheel(1); } }; //┌-----------------------------------------------------------------------------┐ // event: wheel_core // event when mouse whell //└-----------------------------------------------------------------------------┘ _mouse.prototype.wheel_core = function(event){ // allow to add what need, example if on element do other thing than zoom .. $camera.onMouseWheel(event.deltaY<0 && 0.2 || -0.2); }; //$mouse.debug(); // add debug feature mouse mouve //TODO: REMOVE ME _mouse.prototype.debug = function(){ var debugMouse = this._mousemousemove; // (dX: ${~~(mX/Zoom.x)+ScrollX} this._mousemousemove = function(event) { debugMouse.call(this,event); document.title = ` x: ${~~this.x} y: ${~~this.y} || mapX: ${ (this.x/$camera.zoom.x)+$camera.position.x } mapY: ${ (this.y/$camera.zoom.y)+$camera.position.y } || `; }; document.onmousemove = this._mousemousemove.bind(this); };
  3. Hello everyone! I'm using TweenMax.js (GSAP) to tween position for model with bezier but model's rotation incorrect. This is PG: http://www.babylonjs-playground.com/#H30ZQI How to fish's head rotation in the direction of movement? (JUST use TweenMax.js, DON'T use BABYLON.Path3D). Thanks you!
  4. bionicGirl

    Greensock

    Hi, this is my first try with Pixi and I would love to animate it using my fav tweening library Greensock. ABove is my pen. I don't get any errors, yet my displacementMap isn't animating... What am I doing wrong here? Any other improvements are also welcome. Thank you so much!
  5. Hello everyone, i am new here, and would like to ask my first question! I have made a 2d canvas game using mainly CreateJS, and GSAP. For various reasons, i would like to be use Firefox as a browser, but i have had some performance issues that couldn't surpass. So i decided to check a webgl based rendering library such as pixiJS. I have made a quick test page to see if i could get smooth tweening using webgl rendering vs canvas based rendering. I would expect better framerates using webgl, but the truth is that i get lower framerates and really jerky motion. All the articles and examples i've read about the past couple of days were saying the exact opposite. So what am i really missing? Is it Firefox's problem? Is it that i use GSAP for tweening? Is my example code missing anything essential? You could check my quick demo here : http://jsfiddle.net/thvphuub/3/ And i would suggest to run the two versions in fullscreen to see the FPS yourself using the two following links : Using canvas : https://jsfiddle.net/thvphuub/2/embedded/result/Using webgl : https://jsfiddle.net/thvphuub/3/embedded/result/ Actually the above runs quite smoothly using canvas on Firefox...:-S Any insight would be great.Thanks in advance!
  6. Hello folks, I'm a newbie and I try to figure out how this framework works. After I watched this site, I was amazed and wanted to learn more. http://www.shanemielke.com/archives/usopen-sessions/ I'm a little bit stuck on a case. So what I want to do is to draw 3 line that match the border of my window. That's fine, but In a second step, I'd like that this lines move without leaving the border. Here is my little code for this part // This is how I create the line var lineArray = []; for (var i = 0; i < 3; i++) { var line = new PIXI.Graphics(); line.lineStyle(1, 0xf3a33f); if(i == 0) { line.moveTo(getRandomInt(0, window.innerWidth), window.innerHeight); line.lineTo(getRandomInt(0, window.innerWidth), 0); } else if(i == 1) { line.moveTo(0, getRandomInt(0, window.innerHeight)); line.lineTo(window.innerWidth, getRandomInt(0, window.innerHeight)); } else { line.moveTo(getRandomInt(0, window.innerWidth), window.innerHeight); line.lineTo(window.innerWidth, getRandomInt(0, window.innerHeight)); } line.endFill(); line.alpha = 0; stage.addChild(line); lineArray.push(line); }// And this is how I want to animate itvar timeline = new TimelineMax({ paused: true });for (var i = lineArray.length - 1; i >= 0; i--) { lineArray[i].beginFill(0xf3a33f, 1); timeline.add(TweenMax.to( lineArray[i], .05, {alpha: 1}), 1.25);}timeline.play();Is there anyway to do that with the timeline ? Cheers guys !