[Add hover animation to each image]

Thanks @PointC

I hope they help me.

[Add hover animation to each image]

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

[Add hover animation to each image]

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

[How to reset animated object to default state]

Thanks for the reply, @Carl

 

This it the link to our dev

[How to reset animated object to default state]

@Carl You're rock!

 

thanks for the changed pen, now it's worked correctly!

 

I thought this changes helps with FPS, but not.

When page is loading site's FPS equal 60, but when I hover to image FPS down to 3-6 FPS - looks strange, it's default problem?
I'm tried to remove all scripts from the site and  leave only tweenmax lib, but it's still.

 

Sorry for a couple of questions

[How to reset animated object to default state]

@Carl Hi! It's awesome, thank you for that!

 

It's what I want!

Also, can you help me again, please?

I updated pen.

1) I need to animate only current hover object. I need to do like $(this) in jQuery.

2) I need to animate images with static borders. Now animation works on all image. Could you look this example, please?

Thanks for the quick answer.

[How to reset animated object to default state]

I'm forked pen from jonathan

See the Pen NqZPwd by jonathan (@jonathan) on CodePen

So I'm need to create image animation on hover and on mouseleave reset image to default state.

Now animation works well on hover and stopped on mouseleave, but image doesn't reset to default.

So, how I can achieve that?

 

Ideally, I need the same image hover effect like in this site https://www.juliebonnemoy.com/ (project's images after clients list)

Thanks

See the Pen VBeLye by Frunky (@Frunky) on CodePen