Draftly Page Transitions and Section Animations: A Design Guide
Animations should serve communication, not decorate it. When used correctly, they guide the eye and create a sense of quality.
Available Animation Types
Entrance animations (triggered on scroll into view):
- Fade in
- Slide up
- Slide from left / right
- Scale up
- Staggered (each child element animates in sequence)
Hover animations:
- Lift (slight upward translate)
- Glow (subtle box shadow)
- Scale (slight zoom)
- Colour shift
Scroll-based:
- Parallax (multiple layers at different speeds)
- Sticky sections
- Progress indicators
Setting Animations in Draftly
- Select any section or element
- Open the Animation panel (right sidebar)
- Choose entrance animation type and duration
- Preview in the editor before publishing
Duration Guidelines
| Animation type | Recommended duration |
|---|---|
| Hover micro-interaction | 150-200ms |
| Element entrance | 300-500ms |
| Section transition | 400-600ms |
| Background parallax | Continuous, no set duration |
Stagger vs. Simultaneous
For lists and feature grids: use stagger (50-80ms between each item). Creates a cascade effect that feels intentional.
For hero content: simultaneous or very slight stagger (20-30ms).
Performance Note
Animations use CSS transforms — GPU-accelerated and smooth. They won't impact your Core Web Vitals if you stick to transform/opacity-based animations (which Draftly uses by default).
