Animate In, Out per hover

[anteksiler]

Hi there,

 

I have specific links, and hover, I would like to change the image on the right. However, since it's a long animation (I would like to fadeIn the image, and then have it zoom slowly), it's not working as I would like.

container.each(function() {
					var _this = $(this),
							images = _this.find('.portfolio-image'),
							links = _this.find('.type-portfolio');
					
					function animateOver(i, el) {
					  var tl = new TimelineMax();
					  

					  if (!images.eq(i).is(':visible')) {
					  	tl
					  		.to(images.filter(':visible'), 0.5, {autoAlpha: 0, scale: 1, display: 'none'}, 0) 
					  		.to(images.eq(i), 0.5, {autoAlpha: 1, display: 'block'}, 0);
					  }
					  
					  tl
					  	.add(TweenMax.to(images.eq(i), 5, {scale: 1.05}));
					  	
					  el.animation = tl;
					  return tl;
					}
					function animateOut(el){   
						el.animation.reverse();  
					
					};
					links.hoverIntent(function() {
							var i = $(this).index();
							animateOver(i, this);
					});
				});

[Carl]

Hmm, i have some ideas but it's just too hard to figure out how to fix it without a live sample.

I think the problem may be that you are creating new animations on each mouseover.

 

In most cases I'd suggest creating a timeline animation for each element and then play/reverse as you mouseenter / mouseleave like: http://codepen.io/GreenSock/pen/WxgdRz

 

 

 

If you need more help with your specific demo can you reduce it as much as possible in a CodePen? http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

That will greatly help us help you.