Publish content to your screens directly from Microsoft Teams
Learn More

Create Branded Text Animations That Update Automatically
Animating digital signage messaging is a great way to capture attention and interest. Automatically updating animations is a great way to save time and energy. Here’s how to do both.
Are you more of a Photoshop or Canva type of person? Would you rather your software is powerful and feature-rich or simple and easy to use? Often, it feels like you have to choose one or the other. But not always. Napster had both in spades and left its mark on history. And ChatGPT is following a similar path.
AI tools are changing how we interact with technology. You can become a Photoshop person without knowing the difference between the lasso and marquee tools. AI can understand the context and help you choose what’s best. You can have powerful software that’s also straightforward and understandable.
The same is true for writing basic code. Want to create a text animation for your website or your digital signage? Code templates and some help from ChatGPT are all you need, even if you’ve never written a single line of CSS in your life. And if your content management system can receive JSON data – like WordPress and ScreenCloud can – you can even update your animated text based on triggers.
Setting Up a Sandbox To Test CSS Animations
There are countless platforms that host basic HTML, JavaScript, and CSS code. Replit is one (and a constant source of inspiration). CodePen is also a great option. But if you want to create content to put up on screens in an office, manufacturing facility, or restaurant, ScreenCloud’s Playgrounds is the simplest solution.
Playgrounds does more than just host HTML, CSS, and JavaScript. It also has basic data storage and webhook abilities. That means that you can update your displays with new text and information without actually opening the app itself. For example, you could build an automated, auto-updating dashboard powered by company data.
To create a Playgrounds test environment, add the app to your account from the ScreenCloud dashboard:
- Visit the Apps tab in the left-hand menu.
- Search for Playgrounds.
- Select the app.
- Click the large yellow Get button in the upper-right-hand corner.
- Choose a name for your first Playgrounds instance and close the template picker (for this example, it’s best to start from scratch).

After your instance is created, you’ll see three columns – JavaScript, CSS, and HTML – as well as a button in the upper right corner that says Application Data. Each of these will come into play when setting up your animations.
Animate Your First Block of Text with CSS
Let’s say that you want to liven up your office reception area with some engaging signage. If the screen is too bland, people will ignore it. But the same is true if it’s too busy or overstimulating. A simple but interesting animation, like the City Nights Text Effect, is a good middle ground.
Someone has already shared the code online, we just need to make a few small tweaks so it takes advantage of Playgrounds’ Application Data feature.

This particular template is pure CSS with only one line of HTML, so we won’t have to change much. Copy all of the CSS over to the Playgrounds CSS column. Then, copy this and paste it into the HTML column in Playgrounds, below the existing </head> tag:
City Nights Effect