Jump to content

# Animate infinite several elements

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

Hi All

I'm sorry if this is an easy solution but I couldn't find it and I'm totally new.

I have several elements with an infinite rotation but for some reason is working only the first one.

Here is my code:

```(function(\$) {

var
green = \$('.green'),
red = \$('.red'),
brown = \$('.brown'),
// tl = new TimelineLite();
tl = new TimelineLite();

tl

.to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%"  })
.to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15")
.from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, "-=0.15");

})(jQuery);

```

Thank you so much for your help!

##### Share on other sites

• Solution

Hello Roli,

Welcome to the forums!

You said it yourself, the animation is infinite. It has no end. Because you are using a timeline, the second tween is waiting for a previous tween to finish, which will never happen so, it never starts. The same will happen to the third one.

You can do one of two things:

1) Have a tween for each of your elements:

`TweenMax.to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" });`

2) Set the elements on your timeline to start at absolute times, not relative:

```tl
.to(red, 3, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" })
.to(green, 1, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, 0.15)
.from(brown, 3.5, { rotation: "+=360", repeat:-1, ease: Linear.easeNone, transformOrigin:"50% 50%" }, 0.3);```
• 2
##### Share on other sites

Hi Dipscom

Thank you for your help.

I was looking for something like the second option to optimize my code!

You've help me a lot!

Cheers

Roli

• 1

## 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.
×