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
This is example in codepen with default animation
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