Animate on a timeline, publish it as CSS
Open Motion from the canvas, set keyframes and easing, and your published page plays them with CSS keyframes and scroll timelines.
How motion works
Timeline
Set keyframes, scrub through them and shape each move with an easing curve, including your own Bezier.
What moves
Position, scale, rotation and opacity on text, shapes, images, vectors and frames, plus fills, corner radius and vector draw-on.
What drives it
Time, a layer scrolling through view, or the scroll of the whole page.
How often
Once, up to 100 times or forever, forward, in reverse or back and forth.
Reduced motion
Animations play only for visitors who have not asked their system to reduce motion.
Page transitions
Published sites cross-fade from page to page. Turn it off in site settings.
Light on the page
Published motion is CSS. Only an entrance animation, which Builder or your agent can add, puts a small inline script on the page, under 1 KB compressed.