Scroll Ticker Pro

Key Features

• Slot-Based Content: Drop in up to 10 child layers — text, images, cards, logos — just like a Carousel. No hardcoded content needed.

• Scroll-Reactive Direction: The ticker automatically reverses direction when you scroll up, and returns to the initial direction when you scroll down. No page reload required.

• Infinite Loop: Content seamlessly wraps around with no visible jump or gap, creating a true infinite marquee effect.

• Scroll Boost: The ticker speeds up proportionally to your scroll velocity, then smoothly eases back to base speed. Control the intensity with the Boost Intensity slider (0–3×).

• Smooth Direction Transitions: Direction changes are handled gracefully with velocity easing so the ticker never snaps or flickers.

• Fully Customizable: Adjust speed (10–400 px/s), gap between items, background color, horizontal & vertical padding, and initial direction — all from the property panel.

• Performance Optimized: Uses requestAnimationFrame, willChange: transform, and useInView to pause rendering when off-screen. Zero layout thrashing.

Property Controls

• Items — Slot for up to 10 child layers

• Speed — Base scroll speed in px/s (default: 80)

• Initial Dir — Left or Right (segmented control)

• Smooth Change — Toggle smooth direction transitions

• Gap — Spacing between items in px (default: 24)

• Background — Background color picker

• Boost Intensity — How much scroll velocity amplifies speed (0–3×)

• Padding X / Padding Y — Inner padding controls

Use Cases

• Logo tickers and client brand strips

• Announcement bars and news tickers

• Testimonial or review marquees

• Tag clouds and skill badges

• Event or product showcases

How to Use

1. Copy the component to your Framer project.

2. Add child layers (text, images, frames) into the Items slot.

3. Adjust speed, gap, and direction from the property panel.

4. Publish — the ticker reacts to page scroll automatically.