Development Tips

Logi Tutorial: Adding Animated Effects to Your Projects

By John Sweazen
Share on LinkedIn Tweet about this on Twitter Share on Facebook

If you’ve had experience with Logi’s Expert-on-Demand (EOD) team, you know that we provide valuable contract services to help you extend the usability, interactivity, and security capabilities of your applications. Our engineers offer any type of service that goes beyond support but may not require a full-blown professional services engagement.

>> Related: How to Customize Your App With Self-Service Styling <<

In this blog series, we’re spotlighting 10 of our best solutions to help you create outstanding applications. Let’s start with Animate.CSS and HeroSlider, which each allow you to add animated effects to your projects.

How to Use Animate.CSS

Animate.CSS works with JavaScript and can be added to any element within your application. Specifically, it can be used to:

  • Add important emphasis. This is perfect for highlighting elements or making sure vital data stands out.
  • Give user directions or eye-catching introductions. For example, the screen can “shake” when a user improperly submits a form or is missing information.
  • Add interactivity. Users love interactivity within websites, especially on the homepage.

A word of caution: Although we love the light animated fun of Animate.CSS, don’t overdo it. Remember, when it comes to application design, subtlety is key and less is always more.

To use Animate.CSS, simply add the CSS class or CSS stylesheet to the element you want to animate (Figure 1).

Figure 1: How to add the animated class to your style element

There are over 40 animation effects to choose from, as seen in Figure 2:

Figure 2: Animate.css effects

See an Animate.css effect in action here.

How to Use HeroSlider

HeroSlider is another way to use animated effects—in this case, slideshows—to provide users with a better experience. It’s a jQuery plugin that is easy to implement because it’s already designed; the default page is the framework.

We recommend using HeroSlider to:

  • Tell a story. Provide a wizard type of experience when you want to take users through different steps.
  • Engage your users. Instead of elements just popping up or the screen simply refreshing, you’re continually providing users with new information and visualizations. This is great for dashboards in maybe a common area of your office where a lot of people want to see what your application is doing. You can provide separate dashboards on each page.

HeroSlider uses the Report Center Item element within Logi Info, which adds additional column data to DataLayer.DefinitionList results. This allows the developer to easily specify which reports to include in a HeroSlider instance.

To use HeroSlider with Logi Info, add the Report Center Item element to the report and set the ReportCenter Folder property using these steps:

  1. Develop your reports.
  2. Add the Report Center Item provided by Logi.
  3. Tag it with a HeroSlider ReportCenter Folder. It automatically enters into the rotation of your slideshow.

HeroSlider will automatically rotate up to 10 slides (however, we did install a pause button in case users need it). It also allows you to do manual animation between slides.

A word of caution: You can increase the number of slides, but remember that you’re dealing with limited space for the upper slide bar, so brevity is key.

Here at Logi, we have HeroSlider running in our Customer Success department to show how our EOD hours are being utilized. We find it very useful for keeping everyone in the know!

Stay tuned to the Logi Blog for more Expert-On-Demand solutions in the following weeks.

To see demos of these solutions and others recommended by the EOD team, view our EOD webinar.


Originally published March 13, 2018; updated on March 26th, 2018

About the Author

John Sweazen is an Expert-On-Demand Solutions Consultant with Logi Analytics. He has more than 20 years of experience in the IT industry and helping to solve client issues.