Creating Animations

There are several ways to trigger animations and trigger when the page loads is one of the most common.

To do this, you simply need to select the element you want to animate in the panel on the left side or by clicking on it directly in the screen. Once you do so, you will see the “Features” section on the right side panel with a little plus button. Choosing this will give you a list of features that you can apply to that layer. These vary based on layer type such as text vs. graphic but all layers can be animated on page load.

For this example, we’ll fade in the first title in the hero section of the page. Using the drop-down from the plus icon, choose Page Load > Animate In > Fade In. “Animate In” will move you layers from the value that you’re setting and “Animate Out” will move you layers TO the value that you’re setting. The most common case for when a page loads is that you want to take the design you have, move it to a starting position and then back to where it is so you’ll almost always use “Animate In.”

Once you select an animation, a pop-up will appear with presets already applied. In this case of Fade In, you will see that it will fade in over .75 seconds and has a delay set to none. Also, the animation ease is set to Expo Ease Out. Defaults are set for each animation type and also their trigger. For instance, the default for Scale In for the Page Load trigger is different from the default for Scale In for the While Hovering trigger because the intent and experience is different.

That being said, defaults are just starting points. You can click into any field in the pop-up and change the values by typing or from selecting other common defaults in the drop-down you will see. We’ll show an example of how to stagger page load animations next.

In this example, we’re going to slide 3 elements into place when the page loads: The header, the paragraph and the button. First, we’ll add the Page Load animation of Slide In to the “Looks good…” header text.

We’ll keep the defaults but before we close the pop-up, press the Preview button to see the animation in action. You can press preview to see any animation you have set in action. This is a quick way to see how it feels and make tweaks to the amount, timing or ease type.

One other thing to note, most animations have the option to animate “With Fade” which will fade it in or out. This saves you from having to stack a “Fade In” animation on top of things because this is such a common case for all Page Load and Scroll Trigger animations.

With that setup, now you’ll want to add the same Slide In animation to the paragraph and the button. This time, we’ll change the delay so that they don’t all play at the same time. Set the paragraph delay to .25 sec and the button delay to .5 sec.

To see these 3 parts animate on page load, go up and press the Preview button (the play icon in the top bar). Preview is a quick way to see all your animations and interactions as if the page was live. You’ll see the 3 parts animate and each with a .25 second delay in order to give it a polished feel.

One last thing to know is that animations can also be stacked. You can use more than one page load animation if you’d like to do something like change color & scale in or blur in & also slide in from the right. It’s up to you to experiment with different options. You can also use different triggers of course so you can have a scroll trigger but also a click or while hovering trigger on the same element as well.