Jump to content
Search Community

assign animation to several objects

one2gov test
Moderator Tag

Go to solution Solved by Dipscom,

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 am tryinng to place blue balls on top of red balls.
Is it possible to assign one animation for several objects, asuming that i already using loop for other objects
here is simplified pseudocode of what i am thinking about
for (var i = 0; i < element1.length; i++) {
var element1 = element1[i];
var element2 = totallyDifferentElement1;
var element3 = totallyDifferentElement2;
var element4 = totallyDifferentElement3;
tl.to(element1,element2,element3,element4, 5, {x:"100"});
}

instead of 

for (var i = 0; i < element1.length; i++) {
var element1 = element1[i];
var element2 = totallyDifferentElement1;
var element3 = totallyDifferentElement2;
var element4 = totallyDifferentElement3;
tl.add("label");
tl.to(element1, 5, {x:"100"},"label");
tl.to(element2, 5, {x:"100"},"label");
tl.to(element3, 5, {x:"100"},"label");
tl.to(element4, 5, {x:"100"},"label");
}

New codepen 

See the Pen NbBBWQ?editors=1010 by one2gov (@one2gov) on CodePen

i thought all blue balls  would just follow appearence of red ones.

So i can have 2 loops for 2 classes. Is it possible to use 1 loop for both classes?

See the Pen rWrzvP by one2gov (@one2gov) on CodePen

Edited by one2gov
Link to comment
Share on other sites

  • Solution

You can, just use the class selector, you don't even need to create a variable.

tl.to('.ball', 5, {x:"100"});

You could also feed an array of objects. 

tl.to([one,two,three], 5, {x:"100"});

Have a read at the docs, there's loads explained there in detail of the many things GSAP can do for you ;)

 

http://greensock.com/docs/#/HTML5/GSAP/TweenMax/

  • Like 4
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...