pixi Add hover animation to each image

[Frunky]

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

[Sahil]

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/

[Frunky]

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

[PointC]

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.

[Frunky]

Thanks @PointC

I hope they help me.