How to make continuous animations for elements with shorter animation duration's [GASP]

Question

I have the following GASP animation:

$(function () {
    var tmax_options = {
      repeat: -1
    };

    var tmax_tl = new TimelineMax(tmax_options),
      tween_options_to = {
        css: {
          rotation: 360,
          transformOrigin: 'center center'
        },
        ease: Cubic.Linear,
        force3D: true
    };

// Last Argument is Position Timing.
// Use this argument to stagger the visibility of surrounding circles
tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
  .to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
  .to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
  .to($('svg > #XMLID_20_'), 65, tween_options_to, 0);
});

FIDDLE HERE

Now what I wanted to happen in the above animation is that the outermost polygons should rotate (they are found in total). All 4 should rotate at different speeds and should rotate continuously without stopping.

As of now my animation code looks like the following:

tmax_tl.to($('svg > path'), 10, tween_options_to, 0)
    .to($('svg > #XMLID_26_'), 5, tween_options_to, 0)
    .to($('svg > #XMLID_23_'), 70, tween_options_to, 0)
    .to($('svg > #XMLID_20_'), 65, tween_options_to, 0);

As you can see the duration are different: 10,5,70,65. Now the longest animation does't stop, but the shorter animations stop and and then start again at some point. How can I stop this? i.e., how do I make the animations such that the rotation for all the circles are the continuous without stopping?

Incoercible

@AndréDion your the man ! – Incoercible

Answer 1

To get the visual effect of continuity, select ease: Power0.easeNone,. It just spins the gears.

As for having different speeds, you should setup 4 different TweenMax animations. One for each gear. And each should have the parameter of repeat:-1.

$(function() {
  var 
    tween_options_to = {
      css: {
        rotation: 360,
        transformOrigin: 'center center'
      },
      ease: Power0.easeNone,
      force3D: true,
      repeat:-1
    };

TweenMax.to($('svg path'), 2, tween_options_to, 0);
TweenMax.to($('svg > #XMLID_26_'), 10, tween_options_to, 0);
TweenMax.to($('svg > #XMLID_23_'), 7, tween_options_to, 0);
TweenMax.to($('svg > #XMLID_20_'), 4, tween_options_to, 0);

});

Here's a working example: https://jsfiddle.net/gvczqhpo/4/

Why 4 different TweenMax's?

Timeline is a, well, timeline. Imagine it's a line that has a starting point and an end point. It commands elements in it to work a certain way at a certain point in time.

What you want to accomplish is not a series of events, but an infinite animation. So I would argue, using a timeline is superfluous here. Just go with 4 different animations ;)

Laban

Answer 2

The problem is that GSAP will only restart the loop if all animations in a TimelineMax object have stopped. Thus, you will need one TimelineMax object per gear:

$(() => {
    const tweenOptions = {
        css: {
            rotation: 360,
            transformOrigin: "center center"
        },
        ease: Linear.easeNone,
        force3D: true
    };
    const timelines = [];
    for (let i = 0; i < 4; ++i) {
        timelines.push(new TimelineMax({
            repeat: -1
        }));
    }
    timelines[0].to($("svg > path"), 10, tweenOptions, 0);
    timelines[1].to($("svg > #XMLID_26_"), 5, tweenOptions, 0)
    timelines[2].to($("svg > #XMLID_23_"), 70, tweenOptions, 0)
    timelines[3].to($("svg > #XMLID_20_"), 65, tweenOptions, 0);
});

Also, make sure to use Linear.easeNone if you want the speed of the animation to stay constant.

You can check out a demo here.

Reductive