Reversing timeline problems

[jjvera]

Hello!
I-m trying to use the same timeline on different html elements (they work as modals). 

I made three functions. One with the Animation Timeline, one with with the .restart() to trigger the animation and the last one with a .reverse().

 

But i doesn-t work properly, i think its a problem with the .set values on the elements when the animation performs at the first time, but i dont know why the reverse doesnt reverse properly. 

 

 

See the Pen NBJPLO?editors=1010 by JulianVera (@JulianVera) on CodePen

[OSUblake]

6 hours ago, jjvera said:

But i doesn-t work properly, i think its a problem with the .set values on the elements when the animation performs at the first time, but i dont know why the reverse doesnt reverse properly. 

 

You're creating a timeline and then immediately calling reverse on it. That won't do anything because the start of an animation is also the end of animation when reversed. You would need to do something like setting the progress of the animation to 1, and then call reverse.

 

However, it would be better if you just kept a reference to the timeline, and then reversed it.

 

var tl;

//OPEN MODAL
$(".modal-trigger").click(function() {
  modalTarget = '#' + $(this).attr("data-target");
  tl = tlOpenModal(modalTarget);
});

//CLOSE MODAL
$( ".modal-close" ).click(function() {
  tl.reverse();
});