@hortonstudio/main 1.7.13 → 1.7.15

package/autoInit/transition.js

@@ -2,7 +2,7 @@
 const API_NAME = "hsmain";
 
 export async function init() {
-  
+
   // Wait for Webflow to be ready before initializing transitions
   window[API_NAME].afterWebflowReady(() => {
     setTimeout(() => {
@@ -14,104 +14,52 @@ export async function init() {
 }
 
 function initTransitions() {
-  const transitionTrigger = document.querySelector(".transition-trigger");
-  const transitionElement = document.querySelector(".transition");
-
-  // Page Load - Trigger entrance animation with optional delay
-  if (transitionTrigger) {
-    // Check if entrance transition should be skipped
-    const skipEntrance = sessionStorage.getItem('skip-entrance-transition');
-    if (skipEntrance) {
-      sessionStorage.removeItem('skip-entrance-transition');
-      // Keep transition element hidden when skipping animation
-      if (transitionElement) {
-        transitionElement.style.display = "none";
-      }
-      return; // Skip entrance animation
-    }
-    
-    // Check if this is the first page load of the session  
-    const isFirstLoad = !sessionStorage.getItem('transition-loaded');
-    const delayAttr = transitionElement?.getAttribute('data-hs-delay');
-    const delaySeconds = delayAttr ? parseFloat(delayAttr) : 0;
-    
-    
-    const triggerAnimation = () => {
-      Webflow.push(function () {
-        transitionTrigger.click();
-      });
-    };
-    
-    if (isFirstLoad && delaySeconds > 0) {
-      setTimeout(triggerAnimation, delaySeconds * 1000);
-      sessionStorage.setItem('transition-loaded', 'true');
-    } else {
-      triggerAnimation();
-      if (isFirstLoad) {
-        sessionStorage.setItem('transition-loaded', 'true');
-      }
-    }
-  }
+  const transitionTrigger = document.querySelector('[data-hs-transition="trigger"]');
+  const transitionElement = document.querySelector('[data-hs-transition="element"]');
 
-  // Monitor for transition completion
-  function waitForTransitionComplete(callback) {
-    if (!transitionElement) return;
-    
-    const checkComplete = () => {
-      if (transitionElement.classList.contains('transition-done')) {
-        callback();
-      } else {
-        setTimeout(checkComplete, 50);
-      }
-    };
-    checkComplete();
-  }
+  if (!transitionTrigger || !transitionElement) return;
 
-  // Helper function to check if element or any ancestor has data-hs-transition="prevent"
-  function hasTransitionPrevented(element) {
-    let current = element;
-    while (current && current !== document) {
-      if (current.getAttribute && current.getAttribute('data-hs-transition') === 'prevent') {
-        return true;
-      }
-      current = current.parentElement;
-    }
-    return false;
+  // Get exit time from data attribute (in seconds)
+  const exitTimeAttr = transitionElement.getAttribute('data-hs-exit-time');
+  const exitTime = exitTimeAttr ? parseFloat(exitTimeAttr) * 1000 : 0;
+
+  // Page Load - Trigger entrance animation
+  // Check if this is the first page load of the session
+  const isFirstLoad = !sessionStorage.getItem('transition-loaded');
+
+  const triggerAnimation = () => {
+    Webflow.push(function () {
+      transitionTrigger.click();
+    });
+  };
+
+  triggerAnimation();
+  if (isFirstLoad) {
+    sessionStorage.setItem('transition-loaded', 'true');
   }
 
   // On Link Click
   document.addEventListener("click", function (e) {
     const link = e.target.closest("a");
-    
+
     if (
       link &&
       link.hostname === window.location.hostname &&
       link.getAttribute("href") &&
       link.getAttribute("href").indexOf("#") === -1 &&
-      link.getAttribute("target") !== "_blank" &&
-      transitionTrigger
+      link.getAttribute("target") !== "_blank"
     ) {
-      // Check if transitions are prevented
-      const transitionPrevented = hasTransitionPrevented(link);
-      
-      if (transitionPrevented) {
-        // Set flag to prevent entrance animation on next page
-        sessionStorage.setItem('skip-entrance-transition', 'true');
-        // Navigate normally without exit animation
-        return;
-      }
-      
       e.preventDefault();
-      
+
       let transitionURL = link.getAttribute("href");
-      
+
       // Trigger exit animation
       transitionTrigger.click();
-      
-      // Wait for animation to complete before navigating
-      waitForTransitionComplete(() => {
+
+      // Wait for exit time, then navigate
+      setTimeout(() => {
         window.location = transitionURL;
-      });
+      }, exitTime);
     }
   });
 
@@ -128,4 +76,4 @@ function initTransitions() {
       transitionElement.style.display = "none";
     }
   });
-}
+}

package/index.js

@@ -1,4 +1,3 @@
-// Version:1.7.13
 const API_NAME = "hsmain";
 
 const initializeHsMain = async () => {
@@ -30,12 +29,6 @@ const initializeHsMain = async () => {
 
   const allDataAttributes = { ...animationModules, ...utilityModules };
 
-  const waitForWebflow = async () =>
-    new Promise((resolve) => {
-      if (!window.Webflow) window.Webflow = [];
-      window.Webflow.push(resolve);
-    });
-
   const moduleMap = {
     transition: () => import("./autoInit/transition.js"),
     "data-hs-util-ba": () => import("./utils/before-after.js"),
@@ -254,42 +247,33 @@ const initializeHsMain = async () => {
     });
   });
 
-  const waitForIx2 = async () => {
+  const waitForIx3 = async () => {
     const startTime = Date.now();
     const timeout = 2000; // 2 second timeout
 
     return new Promise((resolve) => {
-      const checkIx2 = () => {
+      const checkIx3 = () => {
         const htmlElement = document.documentElement;
-        const hasIx2 = htmlElement.classList.contains('w-mod-ix3');
+        const hasIx3 = htmlElement.classList.contains('w-mod-ix3');
 
-        if (hasIx2) {
+        if (hasIx3) {
           resolve(true);
         } else if (Date.now() - startTime >= timeout) {
-          console.warn('[hsmain] IX2 (w-mod-ix3) not detected after 2s timeout. Proceeding anyway, but Webflow interactions may not be fully loaded.');
+          console.warn('[hsmain] IX3 (w-mod-ix3) not detected after 2s timeout. Proceeding anyway, but Webflow interactions may not be fully loaded.');
           resolve(false);
         } else {
-          setTimeout(checkIx2, 50);
+          setTimeout(checkIx3, 50);
         }
       };
-      checkIx2();
+      checkIx3();
     });
   };
 
   const finalize = async () => {
     processModules();
-    await waitForWebflow();
-
-    // Small delay to ensure all scripts are fully initialized
-    await new Promise(resolve => setTimeout(resolve, 10));
-
-    // Force Webflow to reinitialize (not redraw) - rescans DOM and rebinds interactions
-    if (window.Webflow && typeof window.Webflow.ready === 'function') {
-      window.Webflow.ready();
-    }
 
-    // Wait for IX2 to be ready before firing callbacks
-    await waitForIx2();
+    // Wait for IX3 to be ready before firing callbacks
+    await waitForIx3();
 
     window[API_NAME].loaded = true;
     readyCallbacks.forEach((callback) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hortonstudio/main",
-  "version": "1.7.13",
+  "version": "1.7.15",
   "description": "Animation and utility library for client websites",
   "main": "index.js",
   "type": "module",

package/utils/css-animations/buttons/main/bgbasic/btn-main-bgbasic.html

@@ -0,0 +1,10 @@
+<style>
+.btn_main_wrap{
+  transition:background 300ms ease,color 150ms ease
+}
+
+.btn_main_wrap:hover{
+  background:var(--_button-style---background-hover);
+  color:var(--_button-style---text-hover)
+}
+</style>

package/utils/css-animations/buttons/main/bgfill/btn-main-bgfill.html

@@ -0,0 +1,29 @@
+<style>
+.btn_main_wrap{
+  position:relative;
+  transition:color 150ms ease
+}
+
+.btn_main_wrap::before{
+  content:'';
+  position:absolute;
+  bottom:0;
+  left:0;
+  width:0;
+  height:0;
+  background:var(--_button-style---background-hover);
+  border-radius:50%;
+  transform:translate(-50%,50%);
+  transition:width 0.5s ease,height 0.5s ease;
+  z-index:0
+}
+
+.btn_main_wrap:hover{
+  color:var(--_button-style---text-hover)
+}
+
+.btn_main_wrap:hover::before{
+  width:300%;
+  height:300%
+}
+</style>

package/utils/css-animations/buttons/navbar/bgbasic/navbar-main-bgbasic.html

@@ -0,0 +1,17 @@
+<style>
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
+  transition:background 300ms ease,color 150ms ease;
+  border-radius:var(--radius--main)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover{
+  background:var(--_theme---border)
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
+  background:var(--_button-style---background);
+  color:var(--_button-style---text)
+}
+</style>

package/utils/css-animations/buttons/navbar/bgbasic/navbar-menu-bgbasic.html

@@ -0,0 +1,16 @@
+<style>
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
+  transition:background 300ms ease,color 150ms ease;
+  border-radius:var(--radius--main)
+}
+
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover{
+  background:var(--_theme---border)
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
+  background:var(--_button-style---background);
+  color:var(--_button-style---text)
+}
+</style>

package/utils/css-animations/buttons/navbar/bgfill/navbar-main-bgfill.html

@@ -0,0 +1,46 @@
+<style>
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link{
+  border-radius:var(--radius--main);
+  overflow:hidden;
+  position:relative;
+  transition:color 250ms ease
+}
+
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
+  border-radius:var(--radius--small);
+  overflow:hidden;
+  position:relative;
+  transition:color 250ms ease
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link::before,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link::before{
+  content:'';
+  position:absolute;
+  bottom:0;
+  left:0;
+  width:0;
+  height:0;
+  background:var(--_theme---border);
+  border-radius:50%;
+  transform:translate(-50%,50%);
+  transition:width 0.5s ease,height 0.5s ease;
+  z-index:0
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover::before,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover::before{
+  width:300%;
+  height:300%
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link::before{
+  background:var(--_button-style---background);
+  width:300%;
+  height:300%
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
+  color:var(--_button-style---text)
+}
+</style>

package/utils/css-animations/buttons/navbar/bgfill/navbar-menu-bgfill.html

@@ -0,0 +1,39 @@
+<style>
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
+  border-radius:var(--radius--main);
+  overflow:hidden;
+  position:relative;
+  transition:color 250ms ease
+}
+
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link::before{
+  content:'';
+  position:absolute;
+  bottom:0;
+  left:0;
+  width:0;
+  height:0;
+  background:var(--_theme---border);
+  border-radius:50%;
+  transform:translate(-50%,50%);
+  transition:width 0.5s ease,height 0.5s ease;
+  z-index:0
+}
+
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover::before{
+  width:300%;
+  height:300%
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link::before,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link::before{
+  background:var(--_button-style---background);
+  width:300%;
+  height:300%
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
+  color:var(--_button-style---text)
+}
+</style>

package/utils/css-animations/buttons/navbar/color/navbar-announce-color.html

@@ -0,0 +1,5 @@
+<style>
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover{
+  color:var(--swatch--brand-1-500)
+}
+</style>

package/utils/css-animations/buttons/navbar/color/navbar-main-color.html

@@ -0,0 +1,7 @@
+<style>
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link{
+  color:var(--swatch--brand-1-500)
+}
+</style>

package/utils/css-animations/buttons/navbar/color/navbar-menu-color.html

@@ -0,0 +1,7 @@
+<style>
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link{
+  color:var(--swatch--brand-1-500)
+}
+</style>

package/utils/css-animations/buttons/navbar/double-slide/navbar-announce-double-slide.html

@@ -0,0 +1,40 @@
+<style>
+/* ===== DOUBLE SLIDE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_icon.is-placeholder{
+  display:block
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_icon.is-placeholder{
+  transform:translateY(200%)
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+/* Hover States */
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-main,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-main{
+  transform:translateY(-200%)
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-placeholder{
+  transform:translateY(0%)
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+</style>

package/utils/css-animations/buttons/navbar/double-slide/navbar-main-double-slide.html

@@ -0,0 +1,77 @@
+<style>
+/* ===== DOUBLE SLIDE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_icon.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-placeholder{
+  display:block
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_icon.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-placeholder{
+  transform:translateY(200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+/* Hover States */
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-main,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-main{
+  transform:translateY(-200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_text.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_icon.is-placeholder{
+  transform:translateY(0%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+
+/* Active States */
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-main,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-main{
+  transform:translateY(-200%)
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_text.is-placeholder,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_icon.is-placeholder{
+  transform:translateY(0%)
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-main,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+</style>

package/utils/css-animations/buttons/navbar/scale/navbar-announce-scale.html

@@ -0,0 +1,6 @@
+<style>
+/* ===== SCALE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_content{
+  transform:scale3d(1.075,1.075,1)
+}
+</style>

package/utils/css-animations/buttons/navbar/scale/navbar-main-scale.html

@@ -0,0 +1,9 @@
+<style>
+/* ===== SCALE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_content,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_content,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_content,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_content{
+  transform:scale3d(1.075,1.075,1)
+}
+</style>

package/utils/css-animations/buttons/navbar/scale/navbar-menu-scale.html

@@ -0,0 +1,8 @@
+<style>
+/* ===== SCALE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_link:hover .navbar_btn_1_content,
+[data-hs-nav="dropdown"].is-active > .navbar_dropdown_wrap > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_content,
+[data-hs-nav="menu-dropdown"].is-active > .navbar_btn_1_wrap[data-wf--navbar-btn-1--variant="menu"] .navbar_btn_1_content{
+  transform:scale3d(1.075,1.075,1)
+}
+</style>

package/utils/css-animations/buttons/navbar/underline/navbar-announce-underline.html

@@ -0,0 +1,32 @@
+<style>
+/* ===== UNDERLINE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_line_wrap{
+  display:block
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_line.is-main{
+  transform:translateX(-110%)
+}
+
+/* Line Hover States */
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_line.is-main{
+  transform:translateX(0%)
+}
+
+/* ===== UNDERLINE ANIMATION EXTRAS ===== */
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder{
+  display:block
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--navbar-btn-1--variant="announce"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+</style>

package/utils/css-animations/buttons/navbar/underline/navbar-main-underline.html

@@ -0,0 +1,56 @@
+<style>
+/* ===== UNDERLINE ANIMATION ===== */
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_line_wrap,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_line_wrap{
+  display:block
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_line.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_line.is-main{
+  transform:translateX(-110%)
+}
+
+/* Line Hover States */
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_line.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_line.is-main{
+  transform:translateX(0%)
+}
+
+/* ===== UNDERLINE ANIMATION EXTRAS ===== */
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
+  display:block
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_darrow.is-placeholder{
+  transform:translateX(-200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(200%) translateX(-200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-main{
+  transform:translateX(200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_darrow.is-placeholder{
+  transform:translateX(0%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-main{
+  transform:translateY(-200%) translateX(200%)
+}
+
+[data-wf--navbar-btn-1--variant="navbar"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder,
+[data-wf--navbar-btn-1--variant="dropdown"] .navbar_btn_1_link:hover .navbar_btn_1_arrow.is-placeholder{
+  transform:translateY(0%) translateX(0%)
+}
+</style>

package/utils/css-animations/buttons/text/color/text-footer-color.html

@@ -0,0 +1,5 @@
+<style>
+[data-wf--btn-text--variant="footer"] .btn_text_contain:hover{
+  color:var(--swatch--brand-1-500)
+}
+</style>

package/utils/css-animations/buttons/text/color/text-main-color.html

@@ -0,0 +1,5 @@
+<style>
+[data-wf--btn-text--variant="main"] .btn_text_contain:hover{
+  color:var(--swatch--brand-1-500)
+}
+</style>