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.
1573_menumenu1_kUZtUJm4053_Screen_Shot_2016-02-09_at_8.47.01_AM_0O0RSax.
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..
Capture49546
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.
6022_sEbCrfM_-_Imgur_522yIx8capta3derf
Actions & Animations: On Element Display
Give your element a grand entrance.
web element- menu web element- blue menu
Back to Menu
LEARN MORE
DELIVER BETTER CONTENT EXPERIENCES
web element- close
SUBSCRIBE
label 1
Email:
readz logo
SUBSCRIBE
readz logo- bold
web element- close
DELIVER BETTER EXPERIENCES
LEARN MORE
readz logo- mobile
twitter logo
facebook logo
linkedin logo
readz logo
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
VISIT READZ.COM
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES
readz client- nonprofit readz client- health care readz client- sporting goods readz client- financial readz client- legalreadz client- technology readz client- mediareadz client- hospitality readz client- telecommunications readz client- outdoor advertising nurse.com_whitelogoAshley-Stewart-Logo_white
label 1
Email:
SUBSCRIBE
readz logo- mobile twitter logopink twitter logofacebook logopink facebook logolinkedin logopink linkedin logo
Share:
pinterest logopink pinterest logo
USING READZ
BEST OF
LATEST