Create Intro Animations with Pre States

Pre State is a feature that allows you to set an initial state for a widget to create scroll-based animations. For example, if the default X value of your widget's position is 50px and you set the position to -100px in a Pre State, your widget will slide from left to right when the scroll reaches it. The same logic applies to the other attributes.

There are 2 ways you can add a Pre State to the desired object:

1. Select the parent container of the widget you want to have a Pre State.
2. Apply it directly to the widget you want to have a Pre State.

The main difference between these methods is that when you create a Pre State for the parent container and then adjust the widget inside, the Pre State will be triggered upon scrolling to the borders of this container. On the other hand, if you add a Pre State directly to the widget, it will be triggered upon scrolling to the borders of the widget itself.

Let’s look at both of them.

Adding Pre State to the parent container.

1. Select the appropriate container (e.g. section or element)
2. Go to the Actions tab in the top right corner. Then enable Pre State editing mode by selecting the corresponding option.

3. Now adjust the desired properties of widgets inside of your container (e.g. opacity, position, scale, etc.).

Adding Pre State directly to the widget.

1. Select the desired widget
2. Create a Pre State in the Actions tab. Next, adjust your widget’s properties.

How to adjust the animation properties?

1. Select the widget you have applied Pre State to.
2. Go to the Actions tab.
3. Go to the 'Pre-State' section, then hover over the layer you'd like to adjust the animation for. Click on the gear icon.

4. If you change more than 1 widget’s property, you’ll see a menu where you will be suggested to adjust the animation for all attributes together or for each attribute individually.
   1. Select the 'All' option to adjust all available attributes together.
   2. Select the desired option to adjust it individually.

5. Here you can adjust the following attributes: animation duration, delay, and easing.