v0.12.10

scroll-tab-panel component now has 'active' attribute on panel visible in viewport

components.js

@@ -3825,12 +3825,17 @@ customElements.define('scroll-tab-panels', class extends HTMLElement {
                     }
                     this.debounceTimeout = setTimeout(() => {
                         this.fireEvent(entry.target.dataset.index)
-                    }, 300);
+                        if (this.activePanel)
+                            this.activePanel.removeAttribute('active')
+                        this._assignedElements[entry.target.dataset.index].setAttribute('active', '')
+                        this.activePanel = this._assignedElements[entry.target.dataset.index]
+                    }, 100);
                 }
             })
         },
             {
-                threshold: 0.8
+                threshold: 0.8,
+                root: this.tabPanels
         })
         this.tabPanels.addEventListener('slotchange', e => {
             this._assignedElements = this.tabPanelsSlot.assignedElements()

css/main.css

@@ -738,6 +738,12 @@ scroll-tab-panels {
 scroll-tab-panels > * {
   min-height: max(24rem, 50vh);
   margin-bottom: 6rem;
+  opacity: 0.4;
+  -webkit-transition: opacity 0.6s;
+  transition: opacity 0.6s;
+}
+scroll-tab-panels > [active] {
+  opacity: 1;
 }
 
 .auto-grid-layout {

css/main.scss

@@ -598,6 +598,11 @@ scroll-tab-panels{
     & > *{
         min-height: max(24rem, 50vh);
         margin-bottom: 6rem;
+        opacity: 0.4;
+        transition: opacity 0.6s;
+    }
+    & > [active]{
+        opacity: 1;
     }
 }
 .auto-grid-layout{