Observer slider with navigation

[mbuccaneer]

Hello, could anyone point me towards some help combining a simple stacking slider (using observer or otherwise) with a navigation menu? 

 

I just want a fullscreen image slider without text animations that updates the 'active' state of a menu, I have been able to do each thing separately but not combine them.

 

This plus:

 

Plus this:

See the Pen xxjErmp by GreenSock (@GreenSock) on CodePen

 

Thankyou

See the Pen XWzRraJ by GreenSock (@GreenSock) on CodePen

[mvaneijgen]

Can you show us what you've already tried in a minimal demo on Codepen? In theory it is just building an animation (without any scroll logic), you can use the position parameter to have tweens run at the same time and then hooking it up to scroll. The observer example just creates an animation, you can easily add more tweens to that logic. 

 

We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

[mbuccaneer]

Ok, I started building on someone else's code and I have it doing what I want, but I don't know how to highlight the relevant menu item or how to trigger the animation via the menu.

 

So I don't know if I'm close or if it would be easier using observer? I think I need a few pointers I can pick apart to understand.

See the Pen LYowWJw?editors=1010 by mbuccaneer-the-bold (@mbuccaneer-the-bold) on CodePen

[mvaneijgen]

That is the problem with copy and pasting code. It is fine to study some one else their code, but be sure to get your own hands dirty by writing the logic your self, that way you'll will get familiar with the code and can make it your own. 

 

What have you tried your self. My advise would be create your own function that gets trigged on the onLeave and onLeaveBack. The same as updateUI which then gets an index eg realIndex which then uses a gsap tween to make that `.home-link a:nth-child(${realIndex})` lets say a color to keep it simple for now. 

 

Again I highly recommend trying some things your self. We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools!

 

codepen.com/mvaneijgen/pen/JjqgrXo

[mbuccaneer]

You are right of course, it's just a case of finding something near to what I need so I can pick it apart and understand the logic.

 

Thanks for your help!