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.

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:

<code style="font-family:monospace;">&lt;body&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;City Nights Effect&lt;/h2&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="root"&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;!-- Add your code here --&gt; 
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt; 
&lt;/body&gt; 
&lt;/html&gt;</code>

Now click Preview in the upper-right-hand corner of the Playgrounds interface. If your copy/paste skills are sharp, you should see the effect working.

Now let’s figure out how to change the text programmatically.

Automatically Update CSS-Animated Text with JavaScript

In ScreenCloud Playgrounds, click the Application Data button. This will open a window with an empty JSON object that can receive data from external sources. At the bottom of the screen is the URL you’ll send JSON data to.

Copy the API URL, close the Application Data window, and add the following code to your JavaScript column:

<code style="font-family:monospace;">const render = data =&gt; { 
&nbsp;&nbsp;&nbsp;&nbsp;var displayText = data.displayText; //grab the text variable from application data&nbsp;&nbsp;&nbsp;&nbsp; 
 
&nbsp;&nbsp;&nbsp;&nbsp;// replace the "root" HTML element with the following 
&nbsp;&nbsp;&nbsp;&nbsp;ReactDOM.render( 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h2&gt;{data.displayText}&lt;/h2&gt;, 
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.getElementById("root") 
&nbsp;&nbsp;&nbsp;&nbsp;) 
} 
getData().then(data =&gt; render(data)); // retrieve application data</code>

Now you’re all set up to send strings of text to your screens that show up with the City Nights animation. Here’s what to do next.

Updating ScreenCloud Application Data Remotely

We’re going to use Postman to call the Application Data URL and update the text. You could do the same thing with Zapier – check out our post on connecting a SQL database to digital signage – but it requires a paid account. You could also use a cURL command (our digital signage Stream Deck post has an example) but they can be tricky to update as you experiment.

Postman is fun, easy, and free. So let’s start there.

If you haven’t already, download Postman, install it, and familiarize yourself with how it works.

For this workflow, click the plus icon beneath the search bar, change the GET request to PUT, and paste your Application Data URL into the address bar. Then, click the Body tab, choose the raw format, and pick JSON from the Text dropdown. Finally, update the body so it looks like this:

If everything went according to plan, you should be able to reopen Playgrounds and see the updated data in your Application Data window. Hit Preview to make sure the CSS animation works with the new message and you’re ready to do the same for other text animations.

3 Of Our Favorite CSS Animations For Digital Signage

People love sharing their creations, so there’s no shortage of templates and inspiration to draw from. There are a few that stand out for specific digital signage use cases though. Here are our favorite text animations and suggestions for where they might be appropriate.

We love the “HEY” 3D text animation for employee recognition and birthday messages. Adding it to your screens is almost exactly the same as the City Nights instructions from above: copy everything from CodePen to Playgrounds and use the same JavaScript we provided earlier to grab application data. With this template, however, updating the font and colors in the CSS column is far more straightforward.

Safety reminders on a manufacturing warehouse floor

Broadcast a screen that uses the N° 1 animation to remind employees about important safety information. Copy everything over to Playgrounds, update the static “Hello I’m...” message, and paste this slightly altered code into the JavaScript column:


<code style="font-family:monospace;">const render = data => { 
    var displayText1 = data.displayText1; 
    var displayText2 = data.displayText2; 
    var displayText3 = data.displayText3; 
    const updateAnimationSection = () => { 
        const animationSection = document.querySelector('.animation'); 
        animationSection.innerHTML = ` 
            &lt;div class="first"&gt;&lt;div&gt;${displayText1}&lt;/div&gt;&lt;/div&gt; 
            &lt;div class="second"&gt;&lt;div&gt;${displayText2}&lt;/div&gt;&lt;/div&gt; 
            &lt;div class="third"&gt;&lt;div&gt;${displayText3}&lt;/div&gt;&lt;/div&gt; 
        `; 
    }; 
    updateAnimationSection(); 
    setInterval(updateAnimationSection, 8000); // Update every 8 seconds 
}; 
 
getData().then(data => render(data));</code>

When you send updated messaging to your application data, make sure it looks like this:

<code style="font-family:monospace;">{ 
    "displayText1": "Wash your hands", 
    "displayText2": "Wear a hard hat", 
    "displayText3": "Wear gloves" 
}</code>

Client feedback on the support team’s signage

The retro Split Flap Display is a fun and exciting way to celebrate every time a customer submits a review, testimonial, or comment. It just requires a little more work than our other examples. In fact, it barely resembles the creator’s original code. But with ChatGPT to help you make updates and changes based on natural language requests, that’s ok! 

Copy each of the columns from this spreadsheet into Playgrounds. Then, to update the text, use make a PUT request to your ScreenCloud API URL using this JSON format:


<code style="font-family:monospace;">{ 
  "customername": "Aaron Zander", 
  "customercompany": "HackerOne", 
  "date": "August 15", 
  "text": "I would recommend ScreenCloud to anyone looking for signage. There are lots of free tools out there, but it's worth the money to pay for something that works really well. ScreenCloud makes things so easy, and they’re very affordable." 
}</code>

This could also work for social media mentions, closed sales deals, or conference room signage. You could even have it running in its own zone, independent of other app instances and updates. Play around with it until you get it to do exactly what you want.

There’s so much more you can do to automate ScreenCloud content. You can dive into our GraphQL API, build an auto-updating dashboard, or tell Siri what to show on your signage. It doesn’t matter if you never got around to learning GraphQL syntax or how to build Apple Shortcuts. There are plenty of AI chatbots that can help you build powerful automations based on a few simple requests.

And just like ChatGPT, you can play around with ScreenCloud’s digital signage tools for free. Sign up for a 14-day trial today to get started!

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.

Create Branded Text Animations That Update Automatically

Create Branded Text Animations That Update Automatically

Create Branded Text Animations That Update Automatically

Contents

Ask for an AI Summary