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.
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
Logo tickers and client brand strips
Announcement bars and news tickers
Testimonial or review marquees
Tag clouds and skill badges
Event or product showcases
Copy the component to your Framer project.
Add child layers (text, images, frames) into the Items slot.
Adjust speed, gap, and direction from the property panel.
Publish — the ticker reacts to page scroll automatically.
Aliasgar Amir
