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
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>