@studiometa/ui

Appearance

AnchorNav JSTwig ​

Usage ​

This component can be directly imported and defined as a dependency of your application:

js
import { registerComponent } from '@studiometa/js-toolkit';
import { AnchorNav } from '@studiometa/ui';

registerComponent(AnchorNav);

Then in your html make sure to have similar id and href for the link and the target.

html
<div data-component="AnchorNav">
  <a href="#item-1" data-component="AnchorNavLink"></a>
  <div id="item-1" data-component="AnchorNavTarget"></div>
</div>

You can then add options from the withTransition and withMountWhenInView:

html
<div data-component="AnchorNav">
  <a href="#item-1" data-component="AnchorNavLink"
    data-option-enter-to="bg-pink-200"
    data-option-enter-active="transition-all duration-500 ease-out-expo"
    data-option-enter-keep></a>
  <div id="item-1"
    data-component="AnchorNavTarget"
    data-option-intersection-observer='{
      "threshold": 0.5,
      "rootMargin": "0% 0px -30% 0px"
    }'>
  </div>
</div>