Animate list items position

[Jloafs]

Hi all

 

Does anyone have any idea how to achieve this. I'm trying to animate this menu so that the menu items move from top to bottom (shown in the attached images) when clicked or based on scroll trigger position.

 

The triggers are not the issue - I just can't figure out what properties to animate. I had initially thought I could achieve using justify content etc but that doesn't work.

 

Many thanks for any help.

[ZachSaucier]

Hey Jloafs. This seems like a job for flexbox. See this post for more:

 

[Jloafs]

That's what I thought initially but I couldn't figure out what flex properties to use to position nav elements at the bottom then animate to the top - what are the 2 position states I need to use? Each item in the nav needs to push up to the top individually (pushing the nav item above it up without moving those below it). Does that make sense?

[ZachSaucier]

I think you'd only need to animate flex-grow. How about you put together a minimal demo, give it a try, and post again if you get stuck?

[Jloafs]

Thanks Zach. You're right - the flex grow property is definitely the way to go.

 

I've put a basic pen together but it's a long way off working. I've been trying to get the sidebar nav to toggle the active class that applies the flex-grow to the active sidebar element. Ideally would eventually want to hook this up to scrolltrigger too so that the sidebar elements navigate as their associate section scrolls into view. Any thoughts on how to handle this? Sorry I'm a bit out of my depth

See the Pen GRvOWNa by Jloafs (@Jloafs) on CodePen

[Jloafs]

managed to fix this - was easier than I first thought - cheers Zach.