Imagine if the words at the top of your website could move and still display your products but, stay confined in the announcement bar. For example could show everything that the announcement bar can with moving text.
Hi there, @Ray_Giangiordano
Do I get it right that this text animation should work on mobile devices only?
Both mobile and website.
As a marquee
I see that the text in your widget is quite short. So, if we add the scrolling animation, there will be too much empty space when the text disappears;
Would you still like to apply it to the desktop version, or maybe you’re going to add a longer text? Do I get it right that the badge before the text also should move?
Additionally, please specify the direction of the animation: right to left or left to right
Longer text left to right.
Would you like the badge before the text to be moved as well?
Sure I think it would be very helpful to do that.
Got it, thanks!
Could you please also share the version of the long text you’re going to use? It will help us create the solution that fit you best right away
Screenshot work I think they got one on Wix?
Yep, you can share a screenshot
Ah, you’d like to keep the current text from your widget (not “Let’s Talk”), but display it multiple times to fill the bar width like in your screenshot. Is that correct?
Not necessarily instead of the smiley face you could do the box but keep the text that size or maybe a little smaller what you think? Have room to put an image or box.
With the current text size, I think the best solution would be to add two more instances of the text, making a total of three. This will help reduce empty space in the bar and ensure the animation runs more smoothly.
Would you like us to set it up this way?
Yeah, let’s do that.
Great! I’ve passed your request on to the devs and will let you know once I have any news
Sounds awesome, great teamwork.
Hi there, @Ray_Giangiordano
Our devs have implemented the marquee animation for your widget. This code was added to the Custom CSS field on the Style tab of your widget’s settings:
[class^="bar-elements__Paddings"] {
overflow: hidden;
display: flex;
flex-wrap: nowrap;
}
[class^="bar-elements__ElementsWrapper"] {
flex-shrink: 0;
width: fit-content;
animation: marquee 10s linear reverse infinite;
}
[class^="close-button__CloseButtonContainer"] {
z-index: 1;
}
And this code was placed in the Custom JS field on the Settings tab:
const style = document.createElement('style');
style.innerHTML = `
@keyframes marquee {
to {
transform: translateX(-100%);
}
}
`;
document.head.appendChild(style);
const waitForBar = (callback) => {
const observer = new MutationObserver(() => {
const bar = document.querySelector('[class^="bar-elements__Paddings"]');
if (bar) {
observer.disconnect();
callback(bar);
}
});
observer.observe(document.body, { childList: true, subtree: true });
};
const updateBarElements = (bar) => {
const elements = bar.querySelector('[class^="bar-elements__ElementsWrapper"]');
if (elements) {
const elementsDuplicate = elements.cloneNode(true);
elementsDuplicate.setAttribute("aria-hidden", true);
const closeButton = elements.querySelector('[class^="close-button__CloseButtonContainer"]');
if (closeButton) {
bar.appendChild(closeButton);
}
const barWidth = bar.offsetWidth;
const elementWidth = elements.offsetWidth;
const duplicatesCount = Math.ceil(barWidth / elementWidth);
const existingDuplicates = bar.querySelectorAll('[aria-hidden="true"]');
existingDuplicates.forEach(duplicate => duplicate.remove());
for (let i = 0; i < duplicatesCount; i++) {
const duplicate = elementsDuplicate.cloneNode(true);
const duplicateCloseButton = duplicate.querySelector('[class^="close-button__CloseButtonContainer"]');
if (duplicateCloseButton) {
duplicateCloseButton.remove();
}
bar.appendChild(duplicate);
}
bar.querySelectorAll('[class^="bar-elements__ElementsWrapper"]').forEach((el) => {
el.style.animation = 'none';
// WARNING: Expected an assignment or function call and instead saw an expression.
el.offsetHeight;
// Don't touch it, it's render trigger
el.style.animation = '';
});
}
};
waitForBar((bar) => {
updateBarElements(bar);
window.addEventListener('resize', () => {
updateBarElements(bar);
});
});
I’d like to note that Custom JS operates only upon widget installation, not in preview mode. Thus, you can check how the animation works either on the website, where the widget is installed or via the Share Link.
Please check it out and let me know if you like the result
I really like what we have done here. It is perfect. Can we make it so we can make it google fonts and finalize it?