If it weren’t for On Element Display, the animations at the very bottom of the page would animate when the page loads, and you would not be able to see them since you would be at the top of the page when it loads. Let’s explain how On Element Display works. Halfway down the landing page, we have a section that looks like this:
“On Element Display” means that an action will start once a chosen element appears on the screen. We used this to create all of the animations on this landing page. As you can see in the gif below, most of the elements on the page appear and animate on screen as you scroll down the page.
You will see in the gif that when you scroll to this section, the “build without coding” text fades in to appear, followed by the subheader text. The image of the laptop then fades in from the right side of the page. Notice how the text and image start to appear and animate only when this section is visible on the screen. This is due to the On Element Display setting.
Here's how to do it:
Step 1. Select the element that when displayed will trigger the other elements to animate. In this example, we used the white box that contains the 2 text boxes and the image. It's important to note that we'll be using elements in a hidden state to animate in. Because of this, the trigger element must be an element that is not hidden. Hidden means it's not displayed, therefore a hidden element cannot be a trigger for On Element Display. We're using a box that is not in a hidden state to act as our trigger. It's going to trigger elements inside of it that are in a hidden state however. Step 2. Select the Actions menu for that element. Look for the On Element Display section, and click the plus sign next to it to add a new action.
Step 5. Set the element to start out as a hidden element. In the animation panel, there's a button to HIDE TARGET ELEMENT. We want this element to start out hidden so we can watch it fade in.
Step 3. From the Action drop down menu, select “Animate.” Then, click “Select element on canvas” to choose the element that will show. In this example, we used the “Build without coding” textbox as the element to be shown. This means that when the white box appears on the screen, the animation will be triggered, making the “Build without coding” textbox animate. We'll define that animation.Step 4. From the animation drop-down, let's try a "Fade In Left" animation..
Step 6. Use the page play button (toggle ALT+P to turn it on or off) to watch your animation in editor, or use the preview URL to watch it animate.
Actions & Animations: On Element Display
Give your element a grand entrance.
Back to Menu
DELIVER BETTER CONTENT EXPERIENCES
DELIVER BETTER EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES