Customize Your Vault Like a Pro - Smooth CSS Tab Transitions

Welcome back to the “Customize Your Vault Like a Pro” series! If you’re anything like me, you spend a lot of time in Obsidian. And while Obsidian is powerful right out of the box, a little customization can go a long way in making your knowledge management experience even more enjoyable and efficient.

In the previous article, we tackled tweaking the window controls to mimic the sleek look of macOS. This time, we’re diving into CSS tab transitions.

Ever noticed how the default tab switching in Obsidian can feel a little… abrupt? We’re going to fix that! This guide will walk you through adding smooth, visually appealing transitions when you switch between tabs in your Obsidian vault.

We’re going to add a CSS snippet to add these effects. If you don’t know how to do it, here’s how:

• Step 1: Create a snippets Folder:

  • Inside the .obsidian folder, create a new folder named snippets.

• Step 2: Create CSS Snippet Files:

  • Inside the snippets folder, create individual CSS files for each customization you want to make. For example, you might have tab-transitions.css, heading-styles.css, and code-block-styles.css.

• Step 3: Add CSS Code to Snippet Files:

  • Open each snippet file and add the relevant CSS code.

• Step 4: Enable Snippets in Obsidian Settings:

  • Go to Obsidian’s settings (File -> Settings or Cmd + , / Ctrl + ,).
  • Navigate to “Appearance”.
  • Under “CSS snippets”, you’ll see a list of the CSS files in your snippets folder.
  • Toggle the switch next to each snippet to enable or disable it.

The CSS class we must use to add transition effects to switch between notes or open new tabs is .workspace-leaf-content. As promised, I’ll show you a couple of cool transition effects.

Fade In⌗

.workspace-leaf-content{
  animation: fade-in 2s ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

This code makes the content of each pane/tab fade in smoothly over 2 seconds when it’s opened or becomes active. It starts completely transparent (opacity: 0) and gradually becomes fully visible (opacity: 1). The ease timing function gives the animation a more natural and polished feel.

Customization:

• Duration: Change 2s to a different value to adjust the animation speed. For example, 0.5s for a faster fade or 3s for a slower fade.
• Easing Function: Experiment with different easing functions like linear, ease-in, ease-out, or ease-in-out to change the animation’s feel.

Scale⌗

.workspace-leaf-content{
  animation: grow 2s ease;
}

@keyframes grow {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

This CSS code makes each pane’s content smoothly scale up from 0 to its normal size over a period of 2 seconds when the pane is opened or becomes active.

Customization:

You can customize the animation by changing the duration, timing function, and scaling values. For example, you could use scale(0.5) in the from state to start the animation from a smaller size instead of zero. You could also experiment with other transform properties like rotate or translate.

• Faster Animation:

  .workspace-leaf-content {
    animation: grow 0.5s ease; /* Reduced duration to 0.5 seconds */
  }
  
  @keyframes grow {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
  

• Ease-In-Out Timing:

  .workspace-leaf-content {
    animation: grow 1s ease-in-out; /* Changed timing function to ease-in-out */
  }
  
  @keyframes grow {
    from { transform: scale(0); }
    to { transform: scale(1); }
  }
  

• Slightly Smaller Starting Size:

  .workspace-leaf-content {
    animation: grow 1s ease;
  }
  
  @keyframes grow {
    from { transform: scale(0.5); } /* Starts at 50% of the normal size */
    to { transform: scale(1); }
  }
  

Bounce⌗

.workspace-leaf-content{
  animation: bounce 2s ease;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
	40% {transform: translateY(-30px);}
	60% {transform: translateY(-15px);}
}

This CSS code applies a “bounce” animation to the content of each workspace leaf.

Customization:

A subtle animation is generally more pleasing than an overly dramatic one. Experiment with different values for the translateY() property and the animation duration to find a balance that works for you.

/* Example of a more subtle bounce: */

.workspace-leaf-content {
  animation: subtle-bounce 0.5s ease;
}

@keyframes subtle-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

Bounce in Right⌗

.workspace-leaf-content{
  animation: bounce-in-right 2s ease;
}

@keyframes bounce-in-right {
  0% {
    opacity: 0;
    transform: translateX(2000px);
  }
  60% {
    opacity: 1;
    transform: translateX(-30px);
  }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

The code creates a “bounce-in” effect where the content of a new tab or pane slides in from the right, overshooting its final position slightly and then bouncing back to settle into place. The opacity property ensures that the element fades in during the animation.

Customization:

If you find the bounce too strong, you can create a simpler slide-in animation:

/* Subtle Slide-In Animation */
.workspace-leaf-content {
  animation: slide-in-right 0.3s ease-out;
}

@keyframes slide-in-right {
  0% {
    opacity: 0;
    transform: translateX(50px); /* Start slightly off-screen */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* End at the final position */
  }
}

This version uses a shorter duration (0.3 seconds) and a simple slide-in effect without the bounce. It’s generally less distracting and more performant.

Remember to experiment and find the animation that best suits your preferences and workflow.

Gelatine⌗

.workspace-leaf-content{
  animation: gelatine 1s;
}

@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.9, 1.1); }
  50% { transform: scale(1.1, 0.9); }
  75% { transform: scale(0.95, 1.05); }
}

The code creates a subtle “jelly” or “gelatine” effect where the content of a new tab or pane appears to wobble slightly as it loads. The scale() property is used to distort the element’s shape, creating the illusion of movement.

Customization:

Example of a More Subtle Gelatine Animation:

/* More Subtle Gelatine Animation */
.workspace-leaf-content {
  animation: subtle-gelatine 0.7s;
}

@keyframes subtle-gelatine {
  from,
  to {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(0.98, 1.02);
  }
  50% {
    transform: scale(1.02, 0.98);
  }
  75% {
    transform: scale(0.99, 1.01);
  }
}

This version uses a shorter duration (0.7 seconds) and smaller scaling values for a much more subtle effect. It’s less likely to be distracting or cause performance issues. This is a much safer starting point.

Waving⌗

.workspace-leaf-content{
  animation: hithere 1s ease;
}

@keyframes hithere {
  30% { transform: scale(1.2); }
  40%, 60% { transform: rotate(-20deg) scale(1.2); }
  50% { transform: rotate(20deg) scale(1.2); }
  70% { transform: rotate(0deg) scale(1.2); }
  100% { transform: scale(1); }
}

The animation creates a “waving” or “greeting” effect. The content briefly scales up and then oscillates between rotating left and right before returning to its normal state.

Customization:

Example with Reduced Intensity and transform-origin:

/* More Subtle "Hi There" Animation */
.workspace-leaf-content {
  animation: subtle-hithere 0.7s ease;
}

@keyframes subtle-hithere {
  30% { transform: scale(1.1); }
  40%, 60% { transform: rotate(-10deg) scale(1.1); }
  50% { transform: rotate(10deg) scale(1.1); }
  70% { transform: rotate(0deg) scale(1.1); }
  100% { transform: scale(1); }
}

This version reduces the scaling and rotation values, making the animation more subtle. You could also add transform-origin: top left; to the .workspace-leaf-content rule to make the rotation occur around the top-left corner of the content.

In conclusion, CSS animations offer a powerful way to enhance the visual appeal and user experience of your Obsidian vault. Remember to test and adjust the animations to find the right balance between visual appeal and usability.