Using the State dropdown

The In State dropdown allows you to set specific styles for regular view, upon hover, when an item is active, as well as styles for how an item displays when it comes into-view (otherwise known as Out of View state).

By default, Regular state is always selected. Pre-loaded States include Hover, Active, Out of View, Focus, and Visited. You can add additional State Selectors using the drop-down menu under the Pseudo Selectors and Dynamic Classes section.

The In State control is extremely popular for creating a Hover effect. For example, if you want buttons to change color when someone hovers over it, select your button and change the state to Hover. Then apply the styles that you want to take effect for that state. In State styles can be applied to any element.

In a world where everything is competing for attention, adding that extra bit of life to the design increasingly makes the difference. Animations and transitions applied to the Out of View state can be used to spark interest, help the visitor focus on a specific area, increase usability or simply help to capture the attention just long enough.

Demo: Animated Icons

There are endless possibilities with the In State feature. Here are some examples to give you a bit of inspiration.

This example uses the Out Of View State control. This lets you style how you want the element to appear by default, then set a regular style for the when they come into view. This demo uses a subtle animation where the icons slowly animate into place when the page loads, or when the icons are scrolled into view.