Start here
Editing and styles
Media and content
Tutorials
Site and publishing
Layout and navigation
Forms and services
Use animation to direct attention when content enters the browser window. This tutorial uses a Halloween composition to show how a few different movements can support a design.
One Time Animation starts a timed effect when the element enters the viewport. Animate While Scrolling ties its progress to the page position instead. Use the first for a reveal and the second when the visitor’s scrolling should control the movement.
The Halloween image below has a short Fade → Move Up Subtle reveal. The videos later in this tutorial are recordings of the larger examples.
Select an image, text box, button or other supported element. In the Style inspector, choose Add Animation → One Time Animation. Choose the category and animation, then set its distance or other available controls.
Set Duration, Delay and Repeat. Delay postpones the effect after its trigger; it does not change the movement’s speed. Page bottom offset changes how far into the viewport the element must travel before the animation starts.
Choose an Easing preset to shape the acceleration. Use the easing editor to shape a spring or custom curve. Preview from above the element so you can see its entry rather than only its final position.
The screenshots show the category picker and the timing controls. Start with one effect, then adjust it in the context of the surrounding content.
Tombstone — Bounce suggests weight as it arrives. Dog sign — Swing suits the tall hanging image. Small ghosts — Rubber Band echoes their soft shapes. Held pumpkin — Tada creates a brief invitation to look.
Leave the bicycle decoration still. A stable element gives the eye somewhere to rest and makes the other movements easier to follow. Avoid repeating every effect continuously.
Play the first recording to compare the timing and the still elements. The poster and controls keep the example available without starting the video automatically.
The second recording uses delays to introduce services in a sequence. Keep the direction and duration consistent, then increase the delays only enough to establish a reading order. Visitors should not have to wait for essential information.
You can add multiple animations to one element. Add another animation only when the effects have a clear purpose together. For exact timing or coordinated movement, use a named sequence in Keyframes and Timelines.
Preview with ordinary and reduced motion. Essential words, links and controls must remain available when motion is reduced. Check the complete page in the browser, including reversing scroll direction. See Animation and Accessibility.
Please report any shortcoming in this documentation and we’ll fix it as soon as possible!
Updated for Sitely 8
Powerful and refreshingly simple, at home on Mac, finding new freedom on iPad.
This website makes use of cookies.
Please see our privacy policy for details.