[Rollover tweens on multiple elements]

Thanks for the very quick and useful responsive! Hovering works perfectly on all elements now:

	// Rollover Tweens portfolio
	$(".portfolio-vak").each(function(i, el) {

		var portfolioTween = new TimelineMax({paused: true});
			portfolioVak = $(".portfolio-vak");
			portfolioVak = $(".portfolio-vak");
			
		var t = portfolioTween
				.to($(el).find('#portfolio-titel'), 0.3, {y: "-=20px", delay: 0.1})
				.to($(el).find('#portfolio-bekijk'), 0.3, {y: "-=43px", delay: 0.1}, '-=0.3');

		el.animation = t;

		$(el).on("mouseenter",function(){
			this.animation.play();
		}).on("mouseleave",function(){
			this.animation.reverse();
		});
  

  	});

[Rollover tweens on multiple elements]

Hi,

 

I created a simple roll-over effect for multiple elements on a webpage:

	portfolioVak1 = $("#portfolio-vak1");

// Rollover Tweens portfolio
	portfolioTween.to('#portfolio-titel1', 0.3, {y: "-=20px", delay: 0.1}).to('#portfolio-bekijk1', 0.3, {y: "-=43px", delay: 0.1}, '-=0.3');

	portfolioVak1.mouseenter(function(){
  		portfolioTween.play();  
  	}); 
  	portfolioVak1.mouseleave(function(){
  		portfolioTween.reverse();  
  	});

This works perfectly! But now I want this exact same effect to happen on 30 elements on the same page. Off course, the most clean way to do this would be to create a loop, but unfortunately I don't have the knowledge to make a loop happen in this situation.

 

So the code needs to work on 'portfolioVak2', 'portfolioVak3' ...... 'portfolioVak30'. The tweened elements will also change: '#portfolio-titel2', '#portfolio-titel3' etc. and '#portfolio-bekijk2', '#portfolio-bekijk3' etc.

 

 

Thanks for your help,

 

Roelof