Instagram Brand Navigation

[vishalbhulku 7 Likes (Newbie)]

Need Help,

 

I want to achieve navigation similar to  https://en.instagram-brand.com/ , i've 90% achieved it which you can find in my pen.

I want your help when i click on menu item i want indicator to hold on it...

One bug, Indicator doesn't point correctly sometime...

 

Thank a lot....

-Vishal

See the Pen BdBVzE by vishalbhulku (@vishalbhulku) on CodePen

[vishalbhulku 7 Likes (Newbie)]

@OSUblake please help

[Carl 9,066 Likes (Superhero)]

Thanks for the demo and sorry for the late reply.

 

 

Our support really tries to stay focused on questions related to the GSAP API and not so much ones about application logic.

I wasn't exactly sure what all the code was doing, especially the multiple tweens a to() and fromTo() on indicator in the hover function and the same time (so I removed the fromTo() one).

 

To make the indicator stay on the element that you click I just set up a boolean called hasBeenClicked and set it to false. As long as that value is false the hover stuff works like you had it. Once you click hasBeenClicked gets set to true and the hover stuff kind of gets deactivated. I'm pretty sure jQuery has a way of removing event callbacks but didn't have time to look into it.

 

See the Pen OjPBEa?editors=0010 by GreenSock (@GreenSock) on CodePen

 

From what I saw of your demo the indicator did a great job of following the mouse. I couldn't get it to go where it wasn't supposed to go.

 

 

Hopefully this gets you a little closer to your goal. 

If you have any GSAP questions let us know and we will do our best to help.

[vishalbhulku 7 Likes (Newbie)]

Thanks a lot(infinite)  @Carl

[Jonathan 5,176 Likes (Superhero)]

Hello @webapp

 

To add to the Mighty Carl's great advice

 

That type of effect is called a lava lamp style effect.

 

Here are some examples that trigger on click and hover. Of course you can adjust the timing and easing after forking the examples.

 

Trigger lava lamp style effect on hover:

 

See the Pen KGpbe by jonathan (@jonathan) on CodePen

 
Trigger lava lamp style effect on click

 

See the Pen wBDHA by jonathan (@jonathan) on CodePen

 

Happy tweening

[vishalbhulku 7 Likes (Newbie)]

Thanks a lot @Jonathan