Mastering Looping Scroll Animations in Figma

1. What is a Scrolling Text Component?

A scrolling text component (marquee or ticker) is a UI element that displays information in a continuous scrolling motion, often horizontally or vertically. It’s commonly used for live updates, news headlines, notifications, or stock prices, and its purpose is to display non-intrusive, constantly updating information in a compact way.

2. Benefits of Scrolling Text Components

• Space Efficiency: Since the text scrolls, it allows you to display more information within a limited space.
• Real-time Updates: Effective for displaying live, dynamic content that needs to stay fresh, such as breaking news, announcements, or notifications.
• Attracts Attention: Motion naturally draws users' eyes, so this component is a good way to highlight important information without disrupting the main content.

3. When to Use a Scrolling Text Component

• Real-time information: News updates, financial data, stock prices, weather alerts, or any rapidly changing content.
• Limited space: When you want to provide multiple updates or messages within a compact space, like the top or bottom of a screen.
• Non-critical information: Information that’s valuable but not essential, as scrolling components can be easily missed.

4. Pros of Scrolling Text Components

• Continuous visibility: Since the content is always moving, it can subtly reinforce key information without requiring users to interact.
• Engagement: Movement attracts attention, which can engage users who might otherwise overlook static information.
• Efficiency in displaying updates: Useful for real-time or rapid updates where new information replaces older items (like a live sports scoreboard or Twitter feed).

5. Cons of Scrolling Text Components

• Readability Issues: Scrolling text can be hard to read, especially if it moves too quickly or if users have to wait for it to loop back around to read a full sentence.
• User Control: Users have limited control over the text; they can't pause, rewind, or control the speed, which can be frustrating.
• Accessibility Challenges: Continuous motion can be distracting for users, particularly for those with cognitive or visual disabilities. It can also be hard for screen readers to interpret.
• Cognitive Load: Motion demands more attention, which can distract users from other tasks on the screen.

6. Best Practices in Designing Scrolling Text Components

• Prioritize Important Content: Make sure only essential updates go here to avoid clutter.
• Adjustable Speed and Looping: Set a moderate speed that’s easy to follow, and consider adding options to pause or control the scroll.
• Use Short, Clear Messages: Keep messages short and concise; complex sentences or long paragraphs don’t perform well.
• Accessible Alternatives: Include an alternative way to access the information (like a "View All Updates" link) for users who might find scrolling text challenging.
• Optimize for Screen Readers: Use ARIA (Accessible Rich Internet Applications) tags to ensure screen readers can interpret the information without difficulty.

7. Alternatives to Consider

Sometimes, scrolling text isn’t the best approach, so here are some alternatives:

• Static Update Banner: Display each update in a static banner that automatically replaces the previous one after a few seconds.
• Carousel or Slideshow: Users can click or swipe through updates, giving them control over how quickly they view information.
• Notification Drawer: A small, collapsible section where users can scroll through updates at their own pace.
• Push Notifications: For mobile apps, push notifications can alert users of real-time updates without relying on scrolling text.

8. Examples in Practice

• News Websites: News tickers are commonly seen in news apps or channels (e.g., BBC, CNN, Investopedia), often showing top headlines or breaking news at the bottom of the screen.
• Finance Apps: Stock prices and currency exchange rates are often displayed in scrolling banners to keep data up to date.
• E-commerce Sites: Some e-commerce sites (e.g., Temu, Trendyol) use scrolling text for deals or promotions, but it’s generally static to avoid overwhelming users.

9. How to make a basic looping text component in Figma?

Okay, let's recreate the cover video message and create a loop, all you need to do is a component set of two frames, your text message three times each, some dividers and two types of interactions and you're ready to go.

Step 1:

Use the Text tool (T) to create your text, duplicate it at least three times. Group the duplicates with Ctrl+G (Windows) / Cmd+G (Mac) and adjust the gap between each copy. Frame the selection by pressing Option+Cmd+G (Mac) / Alt+Ctrl+G (Windows), then adjust the frame's width to control how your content appears on screen. Don’t forget to tick the Clip Content checkbox for the frame. Use Option+Cmd+K (Mac) / Alt+Ctrl+K (Windows) to create a component.

Step 2:

Create a variant of your component. In this new variant, move your grouped content from right to left, aligning the middle content with the position in the first frame as shown below:

Step 3:

Time to animate! You need only one trigger: After Delay with the Smart Animate option. Switch to Prototype mode, drag an interaction arrow from your starting layer and connect it with the second variant. To control the speed of your loop, I suggest using Figma’s maximum delay time of 10,000 ms. Follow the interaction settings below for the first variant:

For the second variant, drag the arrow to connect it back to the first variant and set the interaction as shown below:

Step 4:

Test it out! Grab a fresh frame, place your first variant in it however you like, switch to Prototype mode, and enjoy!

Final Thoughts

Scrolling text components can be powerful for presenting real-time information without taking up too much screen space. However, they need to be used carefully to avoid negatively impacting the user experience. Consider the context, audience, and purpose of the information, and always prioritize readability and accessibility. Remember, users benefit most from a well-balanced design that provides information in a way they can control and easily digest.

As you design, ask yourself:

• Is this information essential for users, or would a static banner suffice?
• Are users likely to miss this information if it’s only available in a scrolling format?
• Is this component accessible and user-friendly for all users?

By considering these factors, you’ll be able to decide if a scrolling text component truly adds value to the user experience.