Is there a way to translate the x: value a number of times using repeat?

[rykerrumsey 1 Likes (Newbie)]

My question is about how I would go about moving these squares in the pen a certain number of times according to the TimelineMax({repeat: 5}.

 

eg.

 

-----                                        ------

|__ |   -> moves x amount -> |___| -> moves x amount -> for 5 times then returns to initial x position.

See the Pen JGMVaj by rykerrumsey (@rykerrumsey) on CodePen

[ZachSaucier 7,152 Likes (Superhero)]

Hey Ryker, welcome to the forums.

 

Is the issue that you want the blue and red squares to be animated at the same time? According to your description I can't tell the how behavior you're seeking is different than the demo you showed.

[rykerrumsey 1 Likes (Newbie)]

Sorry for the confusion. 

I would like the boxes to continue moving a certain number of pixels in increments. Instead of snapping back to original position for the next repeat.

 

I know I could just hard code the steps in the animation, but it seems inefficient. Is there a better way.

*see updated pen*

[ZachSaucier 7,152 Likes (Superhero)]

There could be a more GSAP way to do it, but this can be done by looping it inside of a for loop as opposed to using the repeat attribute:

var currX = 50,
    tl = new TimelineMax();


for(var i = 0; i < 4; i++) {
  tl.to(".red", 1, {x:currX})
    .to(".blue", 1, {x:currX});
  currX += 50;
}

See the Pen EPoJBx by Zeaklous (@Zeaklous) on CodePen

 

This may be the only way due to the fact that the value of the tos cannot be changed on repeat (i.e. new Tweens have to be created).

[PointC 14,427 Likes (Superhero)]

If you'd like to shorten it a bit more, you could also use:

var tl = new TimelineMax();
for(var i = 0; i < 4; i++) {
  tl.staggerTo(".box", 1, {x:"+=50"},1)
}

[OSUblake 18,495 Likes (Superhero)]

@PointC

 

Why did you use a stagger? That got me thinking about something, using the same element in a stagger. I never tried it before, but it will work if there's no overlap in time.

TweenMax.staggerTo([".red",".red",".red",".red"], 1, { x: "+=50" }, 1);

Another experiment. Using lodash to fill an array with the same value. So this will create 20 tweens.

TweenMax.staggerTo(_.fill(Array(20), ".blue"), 1, { x: "+=50" }, 1);

Not sure if I would ever do something like that, but it might come in handy somewhere down the line.

See the Pen bEaymJ?editors=0010 by osublake (@osublake) on CodePen

[OSUblake 18,495 Likes (Superhero)]

Oh, I see why now. I totally missed that. It's a good solution, and got me thinking. Thanks.

[PointC 14,427 Likes (Superhero)]

Ha - that's funny - I did almost the exact same experiment with the same element in a stagger and found that it would work. I don't know if it's the best way to accomplish a particular goal, but kind of cool that it works.

 

BTW - I guess I missed your 1,000th - congratulations on cracking the 1,000 post mark.

[OSUblake 18,495 Likes (Superhero)]

Oh, wow! I didn't realize I had that many. Does this mean I can take rest of the day off?

[PointC 14,427 Likes (Superhero)]

Yes - I believe you can take the rest of the day off and Jack or Carl should be along shortly with your free t-shirt and/or company car.

[GreenSock 18,584 Likes (Superhero)]

Blake, the lime green Ferrari should be delivered by Saturday. Congrats. Make sure you wear your cape when you're driving it around town.