Creating Rotating Text Banner with Vertical Animation in JavaScript for E-commerce

Other Questions Shopify
1

I’m working on a promotional banner for my online store and need some help with JavaScript animations. Right now I have a simple scrolling text banner that works fine, but I want to make it more engaging.

<div id="rotating-banner" style="background-color: #1a2332; padding: 10px; text-align: center;">
  <div class="banner-text" style="color: white; font-weight: bold;">
    <span>FREE SHIPPING on all orders over $50 - Limited Time Offer!</span>
  </div>
</div>

<script>
const messages = [
  "FREE SHIPPING on all orders over $50 - Limited Time Offer!",
  "New Customer Special: Use code WELCOME15 for 15% off",
  "Over 10,000 Happy Customers Worldwide",
  "30-Day Money Back Guarantee on All Products"
];

let currentIndex = 0;
const bannerElement = document.querySelector('.banner-text span');

function rotateMessage() {
  bannerElement.textContent = messages[currentIndex];
  currentIndex = (currentIndex + 1) % messages.length;
}

setInterval(rotateMessage, 3000);
</script>

What I want to achieve is having four different promotional messages that switch every 3 seconds with a smooth vertical transition effect. Instead of horizontal scrolling, I’d like the text to slide up or fade between messages. The whole cycle should take about 12 seconds total before repeating.

I’m using a content management system where I can only add HTML code to specific fields, so the solution needs to be self-contained. Can someone help me modify this approach to create the vertical rotating effect I’m looking for?

2

skip the js transitions and go with keyframe animations. set up @keyframes slideUp going from translateY(100%) to translateY(0%) with 0.5s duration. way smoother than doing transforms manually, plus it’s pure css so it’ll work perfectly in your cms. just have your setInterval toggle the animation classes on and off.

3

Your code structure looks good, but you need some CSS tweaks for smooth vertical animation. Wrap everything in a div with fixed height and overflow: hidden, then position your text inside. Don’t rely on transform alone - combine CSS transitions with opacity changes. Set your banner to position: relative and each message span to position: absolute with transition: opacity 0.5s ease, transform 0.5s ease. When switching messages, hit the outgoing text with opacity: 0 and transform: translateY(-30px) while the new text gets opacity: 1 and transform: translateY(0). Creates a clean fade-up effect that looks pro on ecommerce sites. Your 3-second timing works perfectly - enough time for the transition without dragging.

4

add transform: translateY(-100%) to your css transitions. wrap each message in a div and mix opacity changes with vertical movement. try bannerElement.style.transform = 'translateY(-20px)' then reset to 0. it works nice for ecom banners - used this method b4.

5

Stack your messages vertically in a container with overflow: hidden and position them absolutely. Use JavaScript to animate the top property or translateY transform to slide them up smoothly. I built something like this for a client’s promo header - position: absolute with transition: all 0.5s ease-in-out worked best. Set active messages to top: 0 and sliding ones to top: -100%. Just nail the timing so the next message slides in as the current one slides out. Works great in CMS setups since you only need inline CSS and JavaScript.