Search the Community

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

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 !

Hello all, lately I have been trying to find a way to save progress or part of a game session that was made with canvas. What I came up is explained in the following tutorial-like blog post of mine: http://nightlycoding.com/index.php/2014/01/replay-system-for-kineticjs-and-html5-canvas Also there is the Codepen where it all started: http://codepen.io/netgfx/full/DLrCy In a nutshell I'am using canvas toDataURL function along with animationFrame only decoupled by underscoreJS debounce (to save some CPU cycles). Playback is made with the excellent Greensock TimelineLite. Let me know what do you think. Should I consider refining it and made more universal? Could some game frameworks be interested?