Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Frunky

Add hover animation to each image

Recommended Posts

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 comment
Share on other sites

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/

  • Like 4
Link to comment
Share on other sites

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 comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×