Jump to content
Search Community

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

rykerrumsey test
Moderator Tag

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

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

@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

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

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.
×
×
  • Create New...