Liferay.Design / Lexicon
/
Get Started
    Foundations
    AnimationsColorGrid
      Layout
    Typography
Resources
Part of Liferay, IncCode/Content LicensesPowered by Gatsby and Netlify

Animations

Sign In
View in Clay

Animations are used to transmit messages while capturing the user's attention in different ways.

Usage

Lexicon provides animations that you can use in your sites and apps. They should only be used to support a message. Specific examples can be found in dataset display.

Empty collection

satellite navigating in the space

The satellite expresses that the dataset is empty and there is nothing in the collection. Use this animation when your initial dataset is empty or a folder is empty.

satellite navigating in the space

The telescope expresses that nothing was found. Use this animation for empty search results or empty results while applying filters over a data set.

Successful empty state

satellite navigating in the space

The spaceship taking off expresses a successful success. Use this animation when a list has been emptied that is worthy of celebration. For example, you could use this to communicate a successful state when a notifications list is emptied.

Changing animations

These are the default animations that Lexicon provides for Liferay products, but you can customize them to reflect your business's brand if you like. Our advice is to choose a theme, and create a story behind it. In our case, we have chosen a space theme and created several animated scenes to support our messages.

Something to improve? Report an issue!
Menu