Jloafs

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

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 https://codepen.io/Jloafs/pen/GRvOWNa

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?

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.

Yeah, apologies. I carried on and got it working. Many thanks - really helped me to get my head around how to start it all off.

Making some progress ( a little). I'm focussing on animating the text element on the left. I think I have the slide-in working OK but struggling with sliding the text out of thee bottom of the container. Ideally the first text should slide in from left then out of the bottom before the next item slides in from left and so on. Is there an easy way to add this to my timeline? Codepen here: https://codepen.io/Jloafs/pen/bGrWarv Many thanks for any help.

Thanks guys - I've been putting this part of the site off for a while haha. I think I have an idea of how to go about it. Should be fun. thanks heaps.

Thanks Cassie I think the part I'm struggling with is I'd normally have list items for a slider either stacked horizontally or vertically (depending on the direction of the slider) and hide them using overflow hidden, then scroll them into view using a transform. The big difference I guess in this case is that while the image slides in from the right as I'm use to, the text is coming from a vertical position. I guess I'm trying to figure out how my list of slides would have to stack - like how would they appear if the overflow wasn't hidden - as each slide seems to contain element that come into view but from different directions. Even as I write this I think it's difficult to explain. Does this make any sense?

Thanks for spotting that - might be related to sharing preferences in dropbox. I've edited the link - hopefully it works OK. Many thanks.

Does anyone have any ideas on how to approach this slider concept? (See screen recorded video on dropbox) Each element in the slider has an image and 2 text elements that all animate in different directions. I've only ever done a simple slider that translates a whole slide out of view as another slide comes into view. Appreciate any help at all on this, however small - I literally can't even think how to start it lol.

Yes. Perfect! Thank you so much

Hi guys I'm pretty inexperienced and just trying to achieve something quite simple using draggable plugin. Can anybody help me to stop the images inside this draggable container from scrolling beyond the left and right edges of the first and last image? I've read through the documentation and tried scrollLeft and bounds etc but just can't get anything to work. Many thanks in advance :-)

Thanks Cassie. Obviously my diagnosis of the isue was completely wrong lol. I just can't translate what's working in the pen into my actual project. The scroll trigger animating of the --y variable seems to work but not the custom wiggle.

Oh - just when I thought it was working… I forgot to mention that my project is built with scss. The css variable approach clashes. Is there a scss based way of doing this Cassie? Many thanks for your help.

Ah, I've got it - thanks heaps Cassie.