Incuna-transitions

Examples

This page was created with the intention of providing the Incuna design team with a way to visualise the sort of transitions and animations we can add to our sites. All of these effects are capable of being customised and fine tuned to fit the specific needs of each design.

We can customise animation properties like duration, timing function, and amount of movement. To learn more about the animation properties that we can affect with css have a look at this guide. Below are a few simple examples.

Duration:

Timing function:

Movement:

We can also apply the transitions to a variety of elements (not just buttons).

This is a paragraph of text with the pulse-shrink animation. Please do not actually put this transition on paragraphs of text. We are just doing it here for demonstration purposes, to show that we can. But I think we can agree that it is not a very user friendly or meaningful animation.

You can, of course, also use whatever colors, fonts, sizes, padding, etc. that you want.

Note to devs: this library is still very much a work in progress so in order to achieve some of these results you may need to customise the mixin to be a bit more flexible first.