Jump to content
GreenSock

rykerrumsey

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

Go to solution Solved by ZachSaucier,

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

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

Link to comment
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.

Link to comment
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*

Link to comment
Share on other sites

  • Solution

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
Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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

Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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
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.
×