Jump to content

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

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

  1. Hey all, I'm working on making a seisomgraph animation, I have the needle animating with random data every second so far. But I'm not sure how to approach the line drawing animation part. I am using GSAP to animate the needle, and was thinking I could read the x, y value at the end of the needle. Then.. save into an array and create a path, clear and draw for every needle animation update. Is this efficient? Is there a better/different way to do this? Thanks for the help!! this.needleGfx.lineStyle(4, 0xffff, 1); this.needleGfx.moveTo(this.xScale(this.maxTime), this.yScale(0)); this.needleGfx.lineTo(this.xScale(this.maxTime) - (this.yScale(0) - this.yScale(this.highValue)), this.yScale(0)); this.needleLen = this.yScale(0) - this.yScale(this.highValue); this.animateLineTest(); animateLineTest() { const x1 = 0; this.y1 = 0; this.y2 = 0; this.x2 = Math.sqrt(this.needleLen ** 2 - this.y2 ** 2); this.prevY2 = this.y2; this.updateTimer = setTimeout(this.updateNeedle.bind(this), 1000); } updateNeedle() { const timeline = gsap.timeline(); const newY2 = { y2: this.prevY2 }; timeline.to(newY2, { duration: 1, y2: this.y2, onUpdate: () => { this.needleGfx.clear(); this.x2 = Math.sqrt(this.needleLen ** 2 - (this.yScale(0) - this.yScale(newY2.y2)) ** 2); this.needleGfx.lineStyle(4, 0xffff, 1); this.needleGfx.moveTo(this.xScale(this.maxTime), this.yScale(this.y1)); this.needleGfx.lineTo(this.xScale(this.maxTime) - this.x2, this.yScale(newY2.y2)); }, onComplete: () => { function randomBetween(min, max) { if (min < 0) { return min + Math.random() * (Math.abs(min) + max); } else { return min + Math.random() * max; } } console.log("Animation completed."); this.prevY2 = this.y2; this.y2 = randomBetween(-10, 10); this.updateNeedle(); }, }); } seismograph-line.mp4
  2. so my gsap duration is longer than next requestAnimationFrame(), lets say 2secs my ques: will it destroy my program in long run? should i bother about it and optimize it? will it create multiple gsap threads? how to optimize/destroy old gsap in next requestAnimationFrame?
  3. Hello, First time posting on this forum. Issue: I am having issues using TweenMax when rendered in WebGL with PIXI. Nothing happens at all. If I change my code to use canvas it works just fine. Is anybody having similar or the same issues? Thanks for any help. let app = new PIXI.autoDetectRenderer(1920, 1080); document.body.appendChild(app.view); let stage = new PIXI.Container(); let testGraphic = new PIXI.Graphics(); testGraphic.beginFill(0x18FF10); testGraphic.drawRect(0, 0, 500, 500); stage.addChild(testGraphic); TweenMax.to(testGraphic, 1, {pixi: {alpha: 0}}); app.render(stage);
  4. 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
  5. 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); };
  6. 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!
  7. 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!
  8. 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!
  9. 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 !
×
×
  • Create New...