E - Announcement bar

A customizable e-commerce announcement bar , built to help online stores highlight offers, free shipping, or new product launches. It’s flexible, responsive, and optimized for conversions — the perfect promo banner for any e-commerce website or landing page.Features

• Multi-mode animation: Slide, fade, bounce, shake, marquee, or carousel for any campaign style.

• Promo-first design: Purpose-built announcement bar for e-commerce promos, discounts, and CTAs.

• Looped messaging: Showcase multiple offers or updates with marquee or carousel modes.

• Custom backgrounds: Use solid colors, gradients, or video backgrounds with opacity control.

• Detailed control: Adjust emojis, buttons, colors, gaps, and links from the panel.

• Dismissible option: Let users close the banner for a cleaner experience.

• Framer-native settings: Control text, typography, spacing, and animation directly — no code required.

1. Animation

Define how your announcement bar enters and interacts with users:

• Animations: Slide Down, Fade In, Zoom In, Bounce, Shake, Marquee, Carousel.

• Advanced controls: animation duration, marquee scroll speed, and carousel timing.

• Carousel Messages: Add multiple promo messages for rotating display.

• Block Gap: Control spacing between marquee loops.

Use Slide Down for a smooth entrance or Shake/Marquee to grab attention during major e-commerce campaigns.

2. Text and Emoji

Craft engaging promotional copy:

• Main Message: Example — “20% off storewide” or “Free Shipping Today!”

• Typography Controls: text color, alignment, font, size, and weight.

• Emoji Support: add emojis before or after text (🔥 🚚 💥).

• Emoji Gap: control spacing for balanced layout.

Use emojis for high-energy campaigns and disable them for professional updates.

3. Button

Turn your announcement bar into a conversion tool:

• Button Options: show/hide button, customize text, add URLs (open in a new tab).

• Design Controls: button background, text color, border, and spacing.

• Best Practice: keep CTAs short — “Shop Now,” “Claim Offer,” or “View Deal.”

4. Background

Three background modes for branding flexibility:

• Solid Color — clean and minimal for everyday announcements.

• Gradient — modern and vibrant, ideal for e-commerce brands.

• Video Background — add visual depth for hero banners.

• Extra Controls: video URL + adjustable opacity (0–1).

5. Close Button

• Show Close Button: gives users control to dismiss the announcement.

• Behavior: hides the bar for that session.

  Perfect for temporary promotions or flash deals, improving UX by avoiding banner fatigue.