Reverse a timeline without reversing a repeating tween

[naaadz]

Hey gsap'ers:

 

I have a timeline of tweens that i want to play forward: that reveals text into view. Then i want to reverse it, so the text reveals out of view.

 

The problem is: the last tween has a blinking tween that repeats infinite, and if i reverse the timeline, it tries to play all the blinks back before it starts to play the other tweens which is not what i want.

 

I tried to separate the blinking part to another timeline, it's not staggering the two timelines correctly.

 

Blake said to do it like this in a previous post

 

gsap.timeline()
  .add(timeline1)
  .add(timeline2, "+=0.5")
  .add(timeline3, "+=0.5")
  ...

 

but it's not working for me with ">" position parameter, it doesn't seem to be waiting for the full t1to be done before starting t2.

 

Would you mind looking at this code, and seeing where i can improve it?

 

Indended behavior:

1. press play button
   1. writes the word style
   2. reveals THAT
   3. types the letters compiles
   4. starts the flashing underscore
2. press reverse button
   1. underscore stops
   2. all other animations reverse in the opposite order they were revealed

 

TYSM

Nadia

 

 

 

 

See the Pen 2f9093547e4a7610f254093f3fec4118?editors=0010 by naaadz (@naaadz) on CodePen

[mvaneijgen]

Hey, you've blocked the forking of your pen. I had to copy everything over manually in order to reply to your post. 

 

What I would do is have a separate timeline for the blinking and add that to your main timeline when onComplete is fired. This way it is not part of the timeline, but gets invoked when the timeline completes. Right now I set the progress of the blinking timeline to 0 and pause it, this hides it immediately. Hope it helps and happy tweening! 

 

See the Pen MWXZRyz by mvaneijgen (@mvaneijgen) on CodePen

[naaadz]

Wow! its perfect, ty so much, @mvaneijgen!!!