Jump to content


Rollover tweens on multiple elements

Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts



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');


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,





Link to comment
Share on other sites

Hello RoelofD and Welcome to the GreenSock Forum!


Check out this forum post I replied to regarding how to apply a timeline to multiple elements for hovering.


It shows how to store the tween timeline in the javascript DOM node:




And 2 codepen examples that show how to apply a timeline to multiple elements your hovering


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


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


Happy Tweening :)

  • Like 1
Link to comment
Share on other sites

A few things ... if you want to apply the same animation to multiple objects, target a class rather than an ID. Secondly, to pause , play, and reverse, you need a timeline. Here is a Codepen that should help.


See the Pen vxEYJv by sgorneau (@sgorneau) on CodePen


Please bear in mind I have no idea what your actual element styling or function should be :)

  • Like 3
Link to comment
Share on other sites

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;


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.