stagger nested elements

[celli]

Hi, I am trying to get my elements to stagger at the same rate, however since some of my elements are nested in an unordered list, those elements that are nested move 2x the amount, since they also take on the distance calculated by their parent. I am unable to change the markup since it is a navigation and the nested sub level navigation needs to stay where it is in the html markup.

 

Is there a way to still have these elements stagger with the rest of my elements, while ending their x position 300px to the right, without factoring in the additional 300px from the parent? Currently the 'sub-lines' move too far to the right, since their new position also takes it's parent's tweened position into account.

 

 

 

See the Pen bGoXXzz by celli (@celli) on CodePen

[PointC]

Seems a little tricky since the <li>s are block level elements. I'd probably pull the <a> tags out of the li. Just a thought.

See the Pen 5495d6020fc56b581e684c1388ab9574 by PointC (@PointC) on CodePen

[celli]

@PointC, Ahh I see the trick is to make the <a> tags inline-block ?  Initially I was trying to animated the <a> tags but they do not animate, without that css!