Set State
A Set State action lets you change a component’s state. Set State actions are super powerful actions that can help you accomplish interactions like drawers, transforming headers, accordions, tab bars, expanding cards, and more. We’ll explore a few of these examples later on in the article.
Target: Select the component that this action will affect
Start & End State: Set the state that the component will start as and finish as (Ex. the component starts in state A and changes to state B)
Delay: Set the number of seconds between the trigger firing and the state changing (Ex. state will change X seconds after the trigger fires)
Duration: Set the number of seconds the state will take to change (Ex. state will change over the course of X seconds)
Easing: Choose the action's easing curve; options are Default, Linear, Ease In, Ease Out, Ease In & Out, or Spring
Case 1: Starting on a Specific State
When the Start State is set to a specific state, like Default, a new property will appear that makes it easier to accomplish interactions like tab bars or multiple choice.
Invert Other Instances: Choose to set all other instances to the Start State when the action occurs
Case 2: Starting with the Current Value
When the Start State is set to “Current Value,” the component will start the interaction in its current state. A new option called “Cycle” will appear for the End State. If you choose “Cycle” two new properties will appear in the node.
Direction: The order in which you created a component’s states is its cycle order; choose whether the component cycles forward or backward
Loop: Set the behavior of your component when you’ve cycled through all states; options are Wrap (start cycling through all states again from the beginning), Ping Pong (reverse the cycle direction to go through all states again), or None
Gesture Triggers with Set State Actions
Set State actions on gesture triggers, like While Scrolling or While Panning, will interpolate between the two states as the user scrolls or pans. Set State actions on these triggers will not have delay, duration, or easing properties.
While Scrolling
A common interaction that uses a While Scrolling trigger with a Set State action is a transforming header. You’ll trigger a state change when a user scrolls from one position to another.
While Panning
A common interaction that uses a While Panning trigger with a Set State action is a drawer. You’ll trigger a state change when a user pans down to close the drawer.