Vertical Sliding Menu

[james182]

Hello

This is my first post here as I am very new to GSAP and JS and would like to seek the wisdom of the GSAP Gods.

 

I am trying to have a vertical menu where the active state is a SVG rectangle which slides up or down behind the text based on which ever list item is "active".

 

I would like to use greensock to animate this, as the rectangle will need to bend in the direction of travel with elastic ease.

 

Could I please get some assistance on the best way to build this. 

See the Pen abbGJZB by james182 (@james182) on CodePen

[ZachSaucier]

Hey James, welcome to the GreenSock forums! We're not gods here, just regular folks like you who have spent more time programming with GSAP  

 

A few notes about your demo: 

• When figuring out what's going wrong (debugging) your browser's developer console is very helpful. You can open it by pressing F12. It shows your errors and warnings about your code.
• It looks like you're trying to use jQuery but you didn't load it. You don't actually need it, you can just pass in a query string as the target for your tween.
• In your HTML you have an class of active, but in your JS you are searching for something with an ID of active. In order for your JS to find the right element, they need to match (both be a class or both be an ID). I recommend using a class since you're likely going to be switching between active elements.
• You are trying to reference a function called myFunction in your onComplete, but it doesn't exist. I recommend at least adding an empty function to make it happy  

With those changes made, your active element moves! 

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

 

However, this likely isn't what you're wanting in the end. In order to help you further, could you please describe the way you want it to animate?

 

9 hours ago, james182 said:

I am trying to have a vertical menu where the active state is a SVG rectangle which slides up or down behind the text based on which ever list item is "active".

Do you mean that you want a red rectangle the size of one navigation item to move up and down the list to be behind the active navigation item? Or something else?

[james182]

Thanks for the welcome and pointers.

I have updated my CodePen example (above) to have the active state working (sort of) but what I am after is my #activeBox SVG to move behind the text with an elastic style.

[ZachSaucier]

Well, you need to get the offset properly. With jQuery that'd be yPos = $(this).offset().top;. Then you can tween to that position with an elastic ease using TweenMax.to(activeBox, 1, {x:0, y:yPos, ease: Elastic.easeOut, onComplete:myFunction});.

 

Adding position: relative; to .menu-wrapper causes the #activeBox to go behind it. 

 

But how do you plan on having the box go behind it and the white/red background to also be behind the text? Or was the red/white not meant to remain? 

[james182]

Thanks, I have added the changes.

But I am still having issues, the layer order should be the Red BG then #activeBox, then the li text.

Should the menu be more greenSock coded rather than jQuery?

See the Pen xvoBrx by keyframers (@keyframers) on CodePen

 (Except vertical)

In the example link the yellow box moves behind the text.

[ZachSaucier]

The approach the the keyframers use in that demo is quite different than the approach that you're using  They essentially did a fake version of what you're trying to do. 

 

The problem with your approach is that currently the background is essentially "attached" to the text. So layering wise you can't really put the gray box in between the two without changing your markup. It's definitely possible though. Just takes some work and using different elements for the text and the white/red background which can be a pain. How about you give it a shot, knowing that?

 

jQuery is unrelated to GSAP, both tools work together just fine (so long as you never use jQuery's .animate() lol).

[james182]

Thanks, for the help.

I think i have fixed it. I had to change the location of the svg and added extra css.