Animation: move image then return to initial position

Ask the community
,
1

I have an arrow pointing to the right that I want to move to the right; then, move it left to its original position. This animation should repeat endlessly. I tried doing this by following the documentation but am running into errors.

My code:

wixAnimations.timeline({repeat: -1, yoyo: false})
.add($w('#front5'), {y: 0, x: 0.02*windowWidth, scale: 1, duration: 500, easing: 'easeInCubic'})
.add($w('#front5'), {y: 0, x: `-=0.02*${windowWidth}`, scale: 1, duration: 1000, easing: 'easeOutCubic'})
.play()

I keep getting an error on the second “add” from the x-input. How do I use -= properly? Thanks!

2

You can try:

const animation = wixAnimations.timeline({repeat: 0})
.add($w('#front5'), {y: 0, x: windowWidth * 0.2, scale: 1, duration: 500 ,easing: 'easeLinear'});
animation.play();
animation.onComplete(animation.reverse);
animation.onReverseComplete(animation.play);
3

Or even better - just set yoyo to true:

wixAnimations.timeline({repeat: -1, yoyo:true})
.add($w('#arrow'), {y: 0, x: windowWidth * 0.2, scale: 1, duration: 2000 ,easing: 'easeLinear'}).play()
4

Yep, that works! Thanks J.D.!