Text Scroll Velocity
Text Scroll Velocity is an interactive Framer component with parallax effect that creates an infinite scrolling text effect that reacts to the speed of scrolling.
Make it with Workshop
Build your own component with AI
Text Scroll Velocity is an interactive Framer component with parallax effect that creates an infinite scrolling text effect that reacts to the speed of scrolling.
Make it with Workshop
Build your own component with AI
Text Scroll Velocity with Parallax effect is an interactive Framer component that creates an infinite scrolling text effect that reacts to the speed of scrolling. The text moves in a smooth, parallax-like motion, speeding up or reversing direction based on scroll velocity.
SEO ready: Ideal for highlighting keywords or brand messages in a dynamic way. It feels light, snappy, and works well in almost any layout.
2 licenses available:
REGULAR: For use in a single Framer project / website. If you hand the project over to a client, the client needs their own Regular license.
COMMERCIAL: Perfect for creative agencies and anyone building Framer templates. This license allows reuse across unlimited client projects and template releases (free or paid), making it a better long term choice than a regular single project license.
Real HTML text, searchable and indexable
Infinite horizontal looping without visible seams
Reactive scrolling, the text speeds up or reverses based on scroll velocity
Different speeds per line for a layered parallax feel
Adjustable damping and stiffness for softer or tighter motion
Custom horizontal spacing between text lines
Full text styling through Framer’s font controls
Individual colors for each line
Tech and SaaS. Feature highlights or onboarding steps that keep long layouts from feeling static.
Creative studios and agencies. Service tags, project keywords or client names that add motion to portfolio sections.
Artist and designer portfolios. Project titles, medium tags or typography accents that guide users through gallery sections.
Events and conferences. Use scrolling text to show speaker names, schedules or sponsor lines in a lively way.
Fitness and wellness. Let training goals, class types or motivational lines slide through the layout for studios, gyms or supplement brands.
Fashion and lifestyle. Editorial headlines, trend names or collection themes drifting at different speeds.
Music and culture. Great for album pages, festival sites or artist portfolios where you want text to feel part of the rhythm.
Food and beverage. Highlight signature dishes, tasting notes or menu sections with a slow parallax drift. Nice for cafés, bars or breweries.
Hospitality and travel. Use moving destination names, room features or short taglines to set the mood for hotels, resorts or tour packages.
Sports and outdoor brands. Gear specs, training goals or activity types presented with a light parallax shift.
E-commerce. Show seasonal promos, shipping perks or product categories drifting at different speeds. Works well for fashion drops or tech gear.
Texts. A list of text lines that will scroll in loops. Add up to ten. Each line becomes a separate row.
Text Colors. Lets you set a different color for each text row. If a row has no assigned color, it falls back to the default color.
Tag. Changes the HTML tag used for each text item. Useful if you want stronger SEO weight with headings or a lighter span element.
Base Velocity. Controls how fast the text moves on its own, even without user scrolling.
Damping. Smooths out the animation. Higher damping makes the motion settle quicker. Lower values feel more loose.
Stiffness. Changes how reactive the spring is. Higher stiffness makes movement snap back faster when scrolling changes direction.
Velocity Min / Max. These define the range of scroll velocity that the component listens to. They decide when the effect starts and how strong it gets.
Output Min / Max. These map the scroll velocity to animation speed. They control how much the text speeds up or slows down while the user scrolls.
Default Text Color. Used when there are more text rows than assigned colors.
Font. Sets the font family, size, weight and spacing. The component waits until your font is fully loaded before animating.
Transform. Applies text casing. Choose between none, uppercase, lowercase or capitalized words.
Text Spacing. Sets the horizontal gap between repeated text blocks. Larger spacing makes the loop look more open.
Parallax Effect (ms). Adds speed variation between rows. Higher values make rows drift at different speeds for a stronger parallax feel.
