Enter

Resources

    Icons (SVG)

      We couldn't found a match for "Lorem ipsum"

      Welcome to the Vault 👋

      Hey Name, we are super excited to have you on board. Thanks for the support and hopefully Osmo becomes your go-to place for inspiration and development tips-and-tricks. Enjoy! - Ilja & Dennis

      0:00

      Upgrade to lifetime

      We’re offering an exclusive €50 discount when you upgrade to a Lifetime membership. We’ll deduct the cost of your current subscription cycle.

      Lifetime Bonus
      As a bonus you’ll also receive our complete marketing website—as a Adlis Smart cloneable or a folder containing all HTML, CSS & JS assets.

      Use discount code:

      TPJH9Q26

      Upgrade to lifetime

      -€50

      Osmo Slack Community

      Help, share, and inspire each other—this is the space to talk about animations all day long and connect with other Osmo members.

      Join Slack Community

      Need help?

      Unfortunately, we don’t currently have the capacity to answer all questions individually—but that’s why we created the Osmo community!

      It’s a space where members can come together to share tips, troubleshoot, and collaborate. Whether you’re dealing with a tricky bug, need advice, or just want to connect with like-minded creatives, our community is here for you.

      Join Slack Community

      Copied SVG to clipboard
      Something went wrong
      Copied code to clipboard
      Something went wrong
      Saved to bookmarks!
      Removed from bookmarks

      Default

      User image

      Default

      Name

      • -€50
        Upgrade to Lifetime
      The Vault/

      Apple Dock Navigation Bar

      Search
      K
      Apple Dock Navigation Bar

      Live Preview

      Documentation

      Adlis Smart

      Code

      Setup: External Scripts

      External Scripts in Adlis Smart

      Make sure to always put the External Scripts before the Javascript step of the resource.

      In this video you learn where to put these in your Adlis Smart project? Or how to include a paid GSAP Club plugin in your project?

      Watch the video

      HTML

      Copy
      <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>

      Step 1: Copy structure to Adlis Smart

      Copy structure to Adlis Smart

      In the video below we described how you can copy + paste the structure of this resource to your Adlis Smart project.

      Watch the video

      Copy to Adlis Smart

      Adlis Smart structure is not required for this resource.

      Step 1: Add HTML

      HTML

      Copy
      <nav class="nav-bar">
  <ul class="nav-list">
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6be92ee5ddf0080fb90_notion.png" loading="eager" alt="Notion app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Notion</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6bef9d004f8a9cf3b29_asana.png" loading="eager" alt="Asana app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Asana</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6be8c099d4e1ed55770_slack.png" loading="eager" alt="Slack app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Slack</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6be5b31ba243e4da377_loom.png" loading="eager" alt="Loom app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Loom</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6bea97e140677496dae_spotify.png" loading="eager" alt="Spotify app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Spotify</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6bea73fcc6ee568f6f0_Adlis Smart.png" loading="eager" alt="Adlis Smart app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Adlis Smart</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728b10be6bc07649a51369e_Osmo.png" loading="eager" alt="" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Osmo</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6bdf9d004f8a9cf3b09_adobe-illustrator.png" loading="eager" alt="Adobe Illustrator app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Adobe Illustrator</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1aaa_figma.png" loading="eager" alt="figma app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Figma</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6be1de916069b5e1a86_adobe-photoshop.png" loading="eager" alt="Photoshop app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Photoshop</div>
      </div>
    </li>
    <li class="nav-item">
      <a href="#" class="nav-item__link"><img src="6728a3e6f4f4161c235bc519/6728a6be051d32942a7aa31e_adobe-premierepro.png" loading="eager" alt="Premiere Pro app icon" class="image"></a>
      <div class="nav-item__tooltip">
        <div>Premiere Pro</div>
      </div>
    </li>
  </ul>
</nav>

      HTML structure is not required for this resource.

      Step 2: Add CSS

      CSS

      Copy
      .nav-list {
  flex-flow: row;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  font-size: 1.4vw;
}

.nav-item {
  justify-content: center;
  align-items: center;
  width: 5em;
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
  display: flex;
  position: relative;
}

.nav-item__link {
  z-index: 1;
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: .5em;
  padding-right: .5em;
  display: flex;
  position: relative;
}

.image {
  object-fit: contain;
  width: 100%;
}

.nav-item__tooltip {
  z-index: 0;
  background-color: var(--color-neutral-100);
  opacity: 0;
  white-space: nowrap;
  border-radius: .25em;
  padding: .4em .5em;
  font-size: 1em;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1), opacity .5s cubic-bezier(.16, 1, .3, 1);
  position: absolute;
  top: 0;
  transform: translate(0, -80%);
  font-weight: 400;
}

.nav-item.sibling-far {
  width: 6em;
}

.nav-item.sibling-close {
  width: 7em;
}

.nav-item.hover {
  width: 8em;
}

.nav-item:hover .nav-item__tooltip{
  opacity: 1;
  transform:translate(0px, -140%);
}

      Step 2: Add custom Javascript

      Custom Javascript in Adlis Smart

      In this video, Ilja gives you some guidance about using JavaScript in Adlis Smart:

      Watch the video

      Step 2: Add Javascript

      Step 3: Add Javascript

      Javascript

      Copy
      function initAppleDockNavigationBar() {  
  // Select all .nav-item elements
  const navItems = document.querySelectorAll('.nav-item');

  // Helper function to add/remove a class to a sibling at a given offset
  const toggleSiblingClass = (items, index, offset, className, add) => {
    const sibling = items[index + offset];
    if (sibling) {
      sibling.classList.toggle(className, add);
    }
  };

  // Event listeners to toggle classes on hover
  navItems.forEach((item, index) => {
    item.addEventListener('mouseenter', () => {
      item.classList.add('hover'); // Add .hover to current item

      // Toggle classes for siblings
      toggleSiblingClass(navItems, index, -1, 'sibling-close', true); // Previous sibling
      toggleSiblingClass(navItems, index, 1, 'sibling-close', true);  // Next sibling
      toggleSiblingClass(navItems, index, -2, 'sibling-far', true);   // Previous-previous sibling
      toggleSiblingClass(navItems, index, 2, 'sibling-far', true);    // Next-next sibling
    });

    item.addEventListener('mouseleave', () => {
      item.classList.remove('hover'); // Remove .hover from current item

      // Toggle classes for siblings
      toggleSiblingClass(navItems, index, -1, 'sibling-close', false); // Previous sibling
      toggleSiblingClass(navItems, index, 1, 'sibling-close', false);  // Next sibling
      toggleSiblingClass(navItems, index, -2, 'sibling-far', false);   // Previous-previous sibling
      toggleSiblingClass(navItems, index, 2, 'sibling-far', false);    // Next-next sibling
    });
  });
}

// Initialize Apple Dock Navigation Bar
document.addEventListener('DOMContentLoaded', () => {
  initAppleDockNavigationBar();
});

      Step 3: Add custom CSS

      Step 2: Add custom CSS

      Custom CSS in Adlis Smart

      Curious about where to put custom CSS in Adlis Smart? Ilja explains it in the below video:

      Watch the video

      CSS

      Copy
      .nav-item.sibling-far {
  width: 6em;
}

.nav-item.sibling-close {
  width: 7em;
}

.nav-item.hover {
  width: 8em;
}

.nav-item:hover .nav-item__tooltip{
  opacity: 1;
  transform: translate(0px, -140%);
}
      Search
      K

      Live Preview

      Resource Details

      Navigation
      Hover
      Interaction
      Reveal

      Original source

      Ilja van Eck

      Creator Credits

      We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.