pixi Make an animation on hover for 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.

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

[ivan.popelyshev]

400 lines. I advise you to shorter that one. Time that you'll wait for an answer depends on it.

[Frunky]

17 minutes ago, ivan.popelyshev said:

400 lines. I advise you to shorter that one. Time that you'll wait for an answer depends on it. 

I was able to shorten this code to 200 lines.

I think unfortunately I can't cut more.

 

Thanks for you reply