Share Posted July 22, 2018 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. Important note: In this example hover works, but I need to copy animation effect, which works on page load, to hover event. The default hover animation isn't correct for me. Thanks See the Pen JBWYKL by Frunky (@Frunky) on CodePen Init script var spriteImages = document.querySelectorAll( '.project-image' ); var spriteImagesSrc = []; for ( var i = 0; i < spriteImages.length; i++ ) { var img = spriteImages[i]; spriteImagesSrc.push( img.getAttribute('src' ) ); } console.log(spriteImagesSrc); var initCanvasSlideshow = new CanvasSlideshow({ addCanvasTo: '.canvas-wrapper', canvasStyleClass: 'canvas', stageWidth: 500, stageHeight: 500, sprites: spriteImagesSrc, displacementImage: 'http://i.imgur.com/2yYayZk.png', centerSprites: true, interactive: true, interactionEvent: 'hover', autoPlay: false, autoPlaySpeed: [10, 3], displaceScale: [200, 70], }); 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: 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' ) { slidesContainer.pointerover = function( mouseData ){ 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 ); }); }; slidesContainer.pointerout = function( mouseData ){ TweenMax.to( displacementFilter.scale, 1, { x: 0, y: 0 }); cancelAnimationFrame( rafID ); }; } This is example in codepen with animation on hover Also I need to load all items, but loads only one item. Why? I need to make loop with initialized script? I think it's a bad idea. Thanks See the Pen oMZbvr by Frunky (@Frunky) on CodePen Link to post Share on other sites
Share Posted July 22, 2018 Take a look at PIXI JS docs and an example that shows how you can have interactive objects. https://pixijs.io/examples/#/demos/interactivity.js http://pixijs.download/dev/docs/PIXI.interaction.InteractionManager.html I didn't understand your rest of the question, I will suggest rephrase your question and try posting it in PIXI js forum. http://www.html5gamedevs.com/forum/15-pixijs/ 4 Link to post Share on other sites
Author Share Posted July 22, 2018 Thanks for quick reply @Sahil! Ok, I'm try to rephrase my questions. 1) In first example we have good animation by state. I need to do that animation only on hover. 2) In first example we have another config for hover event. I'm tried to copy config from state to hover event but with no luck 3) I'm created 3 divs with images but shows only 1. So script append canvas only with first image. Do I need init script on each image? How I can achieve this? With for() loop? Also I'm pasted the same question on html5gamedevs but now question on moderating. Thanks for the all links, I'm learning it now Link to post Share on other sites
Share Posted July 22, 2018 I'd recommend waiting for an answer on the Pixi forum. We do have to keep the focus here on GSAP related problems and questions. This is a Pixi and general logic question. Thanks. 3 Link to post Share on other sites
Author Share Posted July 22, 2018 Thanks @PointC I hope they help me. Link to post Share on other sites
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now