Jump to content
Search Community

How to simply the code which adds an array of tween?

IanY test
Moderator Tag

Go to solution Solved by PointC,

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

When we want three tweens happen one by one, we can simply the code and write it as the following one.

new TimelineLite()
	.from('#elem-1', 1, { y: -100 })
	.from('#elem-2', 1, { y:  100 })
	.from('#elem-3', 1, { y: -100 })


 

But when we want three tweens happen at the same time, we have to add them in an array like the following code. Is there away to simply the code by omitting .add and TweeMax in this case?

new TimelineLite()
	.add([
		TweenMax.from('#elem-1', 1, { y: -100 }),
		TweenMax.from('#elem-2', 1, { y:  100 }),
		TweenMax.from('#elem-3', 1, { y: -100 })
	])
Link to comment
Share on other sites

I'm not sure exactly what is being asked here, but you can use the first method you illustrated by adding a label to the timeline and placing your tweens at that label.

var tl = new TimelineLite();
tl.add('start');
tl.from('#elem-1', 1, { y: -100 }, 'start')
  .from('#elem-2', 1, { y:  100 }, 'start')
  .from('#elem-3', 1, { y: -100 }, 'start');

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

 

Is this simpler though? I think so, but that might be up for discussion :)

  • Like 3
Link to comment
Share on other sites

  • Solution

If you are using the same animation and starting at the same time on multiple elements, you can add the targets to an array. So Shaun's timeline could be further reduced to this:

var tl = new TimelineLite();
tl.from('#elem-1, #elem-3', 1, { y: -100 })
  .from('#elem-2', 1, { y:  100 }, 0);

Happy tweening.

:)

  • Like 3
Link to comment
Share on other sites

@PointC ... absolutely!  :)

 

I was so focused on the label aspect of this I neglected the fact that #elem-1 and #elem-3 could simply be one tween :) (good call!)

 

The reason I went the label route and not the position route was I'm not 100% sure if we are actually at 0 (in the project itself) for this group of tweens. But you're right ... I should have thrown that out there too :)

  • Like 3
Link to comment
Share on other sites

Thanks all. Sorry for not being clear. I was just looking for a way to write less code so that my code looks cleaner.

 

And all elements' animating values are actually different. I shouldn't have made #elem-1 and #elem-3's animating values the same. Sorry about that.

 

It looks like both PointC and Shaun Gorneau answered my question. PointC's code is less; Shaun Gorneau's code is clearer. Thank you!

  • Like 1
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.
×
×
  • Create New...