I've been searching all day and either can't find the right words, or Im not as good as I thought I was at googling.

The idea I have is to turn a 4-word logo into its 4-letter logo acronym version which would activate on a sticky menu, i.e. start with the Long version and slide back into the acronym version or visa-versa.

Appreciate your help

CodePudding user response：

You didn't provide any code examples for what you are trying to do BUT I think I understand what you are trying to accomplish and took it as a mini development challenge.

Reads to me like you want to transition from a multi-word (4) text logo to a multi-letter (4) initialism logo. I made a little demo that does this with a JS class change and CSS @keyframes. You can swap out the JS that toggles the class name how ever you plan to trigger the sticky menu.

Run code snippet below, or view it in a CodePen using SCSS

const button = document.querySelector('.toggle-button');
const logo = document.querySelector('.logo');

button.addEventListener('click', function() { 
  logo.classList.toggle('logo--small');
});

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes letterSpacingNegative1em {
    from { letter-spacing: normal; }
    to { letter-spacing: -1em; }
}

@keyframes letterSpacingNegative02em {
    from { letter-spacing: normal; }
    to { letter-spacing: -0.2em; }
}

body {
    padding: 0 1rem;
    font-family: sans-serif;
}

.logo {
    width: fit-content;
    padding: 10px 14px 8px;
    background-color: #eee;
    line-height: 1;
}

.logo--small .logo__word {
    animation-name: letterSpacingNegative02em;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    animation-duration: 0.2s;
    animation-delay: 0.6s;
}

/**
 * The sibling selector has a lower specificity but is functionally the same
 * as using :not(:first-child).
 */
.logo--small .logo__word span ~ span {
    animation-name: fadeOut, letterSpacingNegative1em;
    animation-fill-mode: forwards, forwards;
    animation-timing-function: ease-out, ease-out;
    animation-duration: 0.4s, 0.6s;
    animation-delay: 0s, 0.4s;
}

<p>
  <button class="toggle-button">Toggle Logo Class</button>
</p>

<h1 class="logo">
  <span class="logo__word"><span>Y</span><span>our</span></span>
  <span class="logo__word"><span>M</span><span>ulti</span></span>
  <span class="logo__word"><span>W</span><span>ord</span></span>
  <span class="logo__word"><span>L</span><span>ogo</span></span>
</h1>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>