Sorters

Sorters grant you authority over visual effects that can be applied to an element and its offspring. These are highly beneficial for situation changes, such as converting a black-and-white image to color upon hovering.

Explore more about sorters and alternate effects.

In this tutorial: 

1. Comprehending sorters
2. Incorporating sorters
3. Regulating conditions
4. Integrating transitions

Comprehending sorters

You have the option to select from various sorter alternatives: 

• Fuzz
• Colorize
• Intensity
• Lightness
• Difference
• Mono
• Sepia
• Reverse

Incorporating sorters

You can put on a sorter just as you can design any category on any element anywhere. You can apply a sorter directly on an image — you can also insert a sorter on an element that has offspring. 

As an illustration, you have 3 Link blocks, all sharing the same category (e.g., “Price link block”). 

To append a Fuzz sorter: 

1. Proceed to the Style panel > Effects > Sorters
2. Tap the plus symbol for Sorters
3. Select Fuzz from the menu
4. Modify the fuzz radius to regulate the fuzz levels for your element and its offspring

If you revert to the Sorter menu and switch from Fuzz to Mono, the Link blocks and their offspring turn monochromatic.

To add an illumination sorter above the monochrome sorter:

1. Tap the plus icon (+) for Sorters
2. Choose Intensity from the menu
3. Slide the Quantity slider to regulate the Intensity level

In this instance, both sorters — Mono and Intensity — are organized like strata. You can toggle the visibility of each sorter, or drag each of the layers around to modify their sequence. 

Regulating conditions

To regulate the sorter on an element while in another condition: 

1. Select the Link block (e.g., “Price link block”)
2. Travel to the Selectfield in the Stylepanel
3. Pick Hover from the menu 

The Hover condition inherits characteristics from the None condition (which is what you were styling when you initially organized Mono and Intensity sorters). Therefore, those sorters remain exactly the same. 

To alter sorters in the Hover condition:

1. Head to the Style panel > Effects > Sorters
2. Tap the Mono sorter you configured previously
3. Revise the Quantity to 0% (which restores the color to the Link blocks)
4. Tap into the Intensity sorter
5. Revise the Intensity Quantity back to 100%

Hover across the Link blocks to witness these updated effects in motion. 

Incorporating transitions

Add a transition to smoothen the sorter effects between None and Hover conditions:

1. Navigate to the menu in the Selectfield and switch back to None
2. Visit the Style panel > Effects > Transitions
3. Tap the plus symbol and insert a Transition
4. Select Sorter from the Transition Type menu 

This will employ a transition to any sorter(s) you’ve arranged to alter between the None and Hover conditions. 

Experiment with the timing of the transition, and hover over the Link block to perceive the transition duration in motion. In this situation, the default of 200 milliseconds appears satisfactory. Persist in adding sorters to elements within your project, and bestow your designs some supplementary interest and interactivity! 

Explore more about styling conditions and refining the animation between conditions with transitions.