How to simply increment movement

[yan_rez]

Is there a way to simply moving an item by an increment with a pause in between. Like from the codepen, what if I want to repeat the increment 50 times?

See the Pen zYNQeqm by eforblue (@eforblue) on CodePen

[akapowl]

 

Welcome to the forums @yan_rez

 

What you're lokking for is

repeat, repeatDelay and repeatRefresh

 

repeat and repeatDelay are pretty self-explanatory, I think.

repeatRefresh set to true makes sure the next repeat starts from the last tweened to position instead of the start.

 

gsap.to('.box', { delay: 1, duration: 1, x: "+=20", repeat: 49, repeatDelay: 1, repeatRefresh: true })

 

See the Pen 3e142c49e870b416826d85e8c318393e by akapowl (@akapowl) on CodePen

 

[yan_rez]

Thank you very much. That is almost what I am looking for.

If there a way to reverse the animation?

 

See the Pen mdRYvxr by eforblue (@eforblue) on CodePen

[akapowl]

7 minutes ago, yan_rez said:

If there a way to reverse the animation?

 

Most certainly, but any suggestion on how to would probably be dependent on when you want it to reverse.

You could still make it part of a timeline for instance.

 

See the Pen e11e8ba34271a2251b33c29dce5b2e3e by akapowl (@akapowl) on CodePen

 

[yan_rez]

I would like to reverse the action on the button click.

[akapowl]

🤔 I actually don't know if there is a way to reverse that.

Maybe someone else with a little bit more insight than me can give you a definitive answer on that though.

 

What you could definitely do instead is create multiple individual tweens in a for-loop ( for whatever amount you want things to repeat ) and add those tweens to a timeline - that would then be easily reversable. Something like this

 

See the Pen b3c8463d504a4efcec70ff3dce300108 by akapowl (@akapowl) on CodePen

[yan_rez]

Thank you very much. This is exactly what I am looking for, and it works.