Reverse an animation after a period of time

[xDream_s]

Good morning,
 

I'm starting to understand GSAP, and I'm gradually trying to do things.
Except that I'm stuck on one point, which is to reverse the animation after a period of time displayed on the screen.
Currently, it is 15sec.
 

I found some topics on the forum, but not having really understood, I didn't venture further.

The code may seem messy.
Alert V5 (codepen.io)

function rebond(){
var elastic = new TimelineLite();
    elastic.to(".box:nth-of-type(1)", 2, {x:530, ease:Elastic.easeOut.config(1, 0.3)}, 0)
      .to(".box:nth-of-type(2)", 2.1, {x:530, ease:Elastic.easeOut.config(1, 0.31)}, 0)
      .to(".box:nth-of-type(3)", 2.2, {x:530, ease:Elastic.easeOut.config(1, 0.32)}, 0)
      .to(".name_pseudo", 1, {x:1690, ease:Elastic.easeOut.config(1, 0.9)}, 0)

}
setTimeout(rebond, 1000);

See the Pen NWoqyPM by idreamsx (@idreamsx) on CodePen

[GreenSock]

I'm not quite sure what effect you're going for, but you seem to be mixing a bunch of CSS animations with GSAP. I'd strongly recommend avoiding that (don't mix them). You're also using a very old syntax for GSAP code. Here's a fork that runs the animation, then waits 3 seconds and runs it in reverse: 

See the Pen qBgqyLB?editors=0110 by GreenSock (@GreenSock) on CodePen

 

That's using repeat: 1, yoyo: true, repeatDelay: 3 on the timeline to do that. Obviously you can change that repeatDelay: 3 to be 15 or whatever you want. 

 

I hope that helps!

[xDream_s]

Thank you very much for your help, it works wonderfully.

I understand that it's a bit messy, I'm going to rework on it to make it simpler and clearer.
 

Thnks