celli Posted January 23, 2022 Share Posted January 23, 2022 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 Link to comment Share on other sites More sharing options...
PointC Posted January 23, 2022 Share Posted January 23, 2022 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 3 Link to comment Share on other sites More sharing options...
celli Posted January 23, 2022 Author Share Posted January 23, 2022 @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! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now