Page load animation

The UI in this lesson may seem different if you've enables the Style Panel Beta! This content will be updated soon!
 
This video features an old UI. Updated version coming soon!
This video features an old UI. Updated version coming soon!
Page load animation

Create a sequenced animation featuring multiple elements during or after a page loads. 

In this lesson:

  1. Set up a timed animation based on the page load trigger
  2. Animate
  3. Preview and adjust


Set up a trigger

  1. From the Interactions panel, choose Page Load from the On Current Page menu
  2. Choose Start an Animation from When Page Starts Loading menu

That’s it — you’ve set up your trigger!


Animate

  1. In the Interactions panel under When Page Starts Loading, click the plus sign next to Timed Animations
  2. Name it (e.g., page load animation)
  3. Select the element you want to animate
  4. Click the plus sign next to Timed Actions and select the action(s) you’d like to add from the dropdown menu (e.g., Move)
  5. Adjust the settings (e.g., toggle the axes or opacity)
  6. Check the box to set it as your initial state


Test and adjust

  1. Click the eye icon in the top left to preview
  2. Click and hold shift to select the actions you’d like to tweak and adjust easing and duration 
  3. To change the order of animations, select your animations and drag and drop them along the timeline in the Interactions panel

Suggested reading list

Browser support

Can I Use ? Data on support for the feature across the major browsers from caniuse.com.

Was this helpful?
OR

Thanks for the feedback! If you can, please add additional feedback below.

Oops! Something went wrong while submitting the form

Thank you! Your feedback has been received!

Oops! Something went wrong while submitting the form