Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
vishalbhulku

Instagram Brand Navigation

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to post
Share on other sites

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.

  • Like 5
Link to post
Share on other sites

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 :)

  • Like 3
Link to post
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.

×