Jose Tamu
January 10, 2025 /
Beginner

Gooey Nav

How it works

Gooey Nav is a nestable element. It contains “Gooey Item” elements that will receive the Gooey effect. You can place the elements you need at them.

Content tab

Animation group

Merge Distance: how much distance the Items will attract. A negative distance would repel them.
Duration
CSS easing: you can set any custom CSS easing of your own. Learn more about CSS easings here.

Style tab

Nav's direction has to be set at the Direction group. It can be column or row. In order to change the direction at mobile or any other breakpoint, you have to set that media pixel at "Switch direction at" control.
Gooey Items styles can be styled at the Gooey Items group at once or individually at each Focus Item element.
There are other 3 groups to customize Focus Nav at pleasure: Margin, Padding and Dimensions. If you need to add more custom styles, you can do so at the Settings tab.