Random position to Initial position

[Frederic Gontier 8 Likes (Newbie)]

Hello,

I would like to set elements from an array to random x and y, move them to a new random x and y position and finally have them go back to their recorded first x and y position. The following doesn't work because there is a jump between the last two tweens:

 

var myArray = [{x:10,y:10},{x:10,y:55},{x:10,y:100}];

var tl = gsap.timeline()
    tl.set(myArray,{x:"random(20,280)", y:"random(20,230)"})
    tl.to(myArray,{x:"random(20,280)", y:"random(20,230)", duration:5})
    tl.from(myArray,{x:"random(20,280)", y:"random(20,230)", duration:3})

 

How can I do that? Is there a better approach?

Thank you,

fred

See the Pen VwvPrqQ?editors=1010 by fr3d3ric (@fr3d3ric) on CodePen

[ZachSaucier 7,064 Likes (Superhero)]

Hey Frederic. One option is to save a copy of the values (not references) of the original array and have GSAP animate to the copy at the end:

See the Pen ExVZLvo?editors=0010 by GreenSock (@GreenSock) on CodePen

[Frederic Gontier 8 Likes (Newbie)]

Hey Zach,

Thanks for your response. It works perfectly.

I have also found a solution using a "reversed" timeline... kinda weird but it works:

 

See the Pen yLYgQwy?editors=1010 by fr3d3ric (@fr3d3ric) on CodePen