ContentBox.js · Guide
Animating Your Page in ContentBox.js
Make your page come alive in a few clicks. ContentBox.js has three animation tools built in: one click for a whole section, a Motion tab for a single element, and a timeline to fine-tune. You don't write any animation code. Here is what we'll make in about five minutes:
In this guide
- Add the two buttons
- Animate a whole section in one click
- Animate one element
- Fine-tune in the timeline
- See it on your page
Step 1
Add the two buttons
The Animate Section and Motion Timeline windows open from two buttons in the editor's left sidebar. Add them after you create the editor:
builder.addButton({
pos: 2, // position in the sidebar
title: 'Animate Section',
html: '<svg><use xlink:href="#icon-wand"></use></svg>',
onClick: () => builder.openMotionCascade(),
})
builder.addButton({
pos: 3,
title: 'Motion Timeline',
html: '<svg><use xlink:href="#icon-anim-timeline"></use></svg>',
onClick: () => builder.openMotionDock(),
})If you followed Adding a Custom Top Bar for ContentBox.js, you already have them. The Motion tab needs nothing: it is always in the edit panel on the right.
Step 2
Animate a whole section in one click
- Click anywhere in a section.
- Click Animate Section (the magic wand) in the left sidebar.
- Click a style, for example Fade up.
You should see: the section plays right away, with each item coming in one after the other. Click another style to try it, or choose Slow under Spread for a gentler cascade.
One click on Fade up, then Slow for a gentler cascade.
Step 3
Animate one element
- Click the element you want to animate, here the heading.
- In the edit panel on the right, open the Motion tab.
- Under Text effects, click Split text.
You should see: the heading plays word by word. The same tab has the presets from Animate Section, plus scroll effects such as parallax, all for just this element.
Split text on the heading, from the Motion tab.
Step 4
Fine-tune in the timeline
- Click Motion Timeline in the left sidebar.
- Each animated item in the section has a row. The diamonds mark where its animation starts and ends.
- Drag the blue playhead along the top to scrub through the animation, or click ▶ to play it.
To change the timing, drag a diamond left or right: the item starts sooner or later. Set Duration to make the whole section play faster or slower.
Scrub with the playhead, then press play.
Step 5
See it on your page
Save, then open your page. The animation plays when the section comes into view, as in the video at the top.
Note: your viewing page needs the ContentBox runtime, which the getting-started guides already include.
Resources
- ContentBox.js innovastudio.com/contentbox
- Documentation on GitHub github.com/innovastudio-dev/contentbox