Jump to content
GreenSock

Jloafs

Animate list items position

Go to solution Solved by Jloafs,

Recommended Posts

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.

menu-1.jpg

menu-2.jpg

Link to comment
Share on other sites

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

 

  • Like 1
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

  • Like 3
Link to comment
Share on other sites

  • Solution

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×