Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
rykerrumsey

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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*

Share this post


Link to post
Share on other sites

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).

  • Like 3

Share this post


Link to post
Share on other sites

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)
}

:)

  • Like 3

Share this post


Link to post
Share on other sites

@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

  • Like 4

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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. :)

  • Like 2

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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. :-P

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×