Creative library and animations
Ready-made sections, page templates and animations reviewed before you can use them, and an animation studio for your own motion.
Creative library
Section titled “Creative library”The catalog covers seven categories:
| Category | Items |
|---|---|
| Heroes | 30 |
| Cards | 40 |
| Content sections | 45 |
| Navigation and chrome | 15 |
| Motion | 35 |
| Scroll animation | 25 |
| Page templates | 10 |
Every item passes a review checklist (rendering, responsive layout, accessibility, licensing and duplicates) before it appears in your Library with the badge Approved.
Use an item
Section titled “Use an item”Open Design → Library and pick an item. Preview shows it first. Then:
- Use on a page: choose the Page and click Add to page. The page editor opens with the sections inserted as unsaved changes, ready to edit and save.
- Add to website: if your website cannot render the item yet, click Propose the change. Atlas proposes a site setup change and writes a Task for the website developer. Your developer adds the component to the website code; a site admin activates the change under Site setup. Atlas never installs code on your website.
- Open in Animations: for motion items, start a new animation from it.
Animation studio
Section titled “Animation studio”Build timed animations (fade, move, scale, rotate and reveal) for elements of your website, preview them, and keep every change as a revision.
-
Open Design → Animations and click New animation. Give it a Name and Key, choose what to Start from (a blank fade-in, or an approved library animation) and click Create.
-
In the Timeline, set the Duration in milliseconds, pick an Element to animate (Title, Image or Button) and Add track. Add keyframes and set Opacity, Move X, Move Y, Scale, Rotate and Reveal for each.
-
Use Play, Pause and Restart, and switch Preview motion between Normal and Reduced to check how it looks for visitors who prefer less motion.
-
Click Save new revision. Earlier revisions stay under Revisions.
Play it on your website
Section titled “Play it on your website”Your developer marks the elements to animate with data-atlas-motion="title" (or media for the image and action for the button) and plays the animation in a client component. The timelines are served by the Delivery API at /motion. The card Add to your website in Studio shows the code. Production plays the revision in its live release.
Limits. 80 ms to 60 s per animation, up to 12 tracks of 24 keyframes. Playback starts when your website calls it; scroll-triggered playback is not built in.