Your first animation, in five minutes.

A heading on your home page that’s invisible at first, then fades up into place when it scrolls into view. The simplest motion there is, and the one you’ll reuse the most across your site.

On WordPress, click Edit with Glopzi in the admin bar while viewing the page you want to animate. On any other site, add ?glopzi-edit=1to the page’s URL and load it. The editor at studio.glopzi.com opens with your real page loaded inside a frame.

Take a second to look around. Your page is in the middle. The sidebar on the left will list animations as you create them. The toolbar at the top has Save, Preview, and the responsive breakpoint switcher.

1. In the left sidebar, click + Pick element to animate at the bottom.
2. Move your cursor over the page in the frame. Elements highlight as you hover. Click the heading you want to animate (your hero title, for example).

A modal asks what kind of animation you want: Text, Scroll, or Time. We’ll choose Time in the next step.

Click Time in the modal. Time animations are the right tool when you want a motion that runs once with a fixed duration: page load reveals, hover effects, click flourishes, things scrolling into view.

You’ll see a new entry in the sidebar with the alias of the element you picked, and a configuration panel on the right.

In the configuration panel on the right, find Trigger. The default is In view, which is exactly what we want: the animation starts the moment the element scrolls into the visitor’s viewport. Leave it as is.

Below that, you’ll see Duration (default: 1 second) and Delay (default: 0). The defaults are fine for a first try.

The animation panel has a list of properties you can animate. We’ll change two of them so the heading fades and slides in.

1. Find Opacity in the property list. Click the plus icon next to it to enable it.
2. You’ll now see two checkpoints: a Start (at 0%) and an End (at 100%). Set Start to 0 and End to 1.
3. Now find Translate Y. Click plus to enable. Set Start to 30 and End to 0. (Glopzi uses an inverted Y in the UI: positive numbers mean up.)

Scroll the page in the frame so the heading goes off-screen, then back into view. You should see it fade and rise into place. If something looks off, click the heading in the sidebar to bring up its panel and tweak the values. Every change reflects live in the frame.

You can also click the Preview button in the toolbar to open a clean view of the page (no editor chrome) and interact with it as a visitor would.

Click Savein the toolbar. Within a few seconds, the bundle for your site is regenerated and pushed to our CDN. Open your site in a fresh browser tab (or an incognito window so you don’t see cached content) and scroll to the heading. You’ll see the fade-up running for real visitors.

• Try a Scrollanimation next. Same picker, same properties, but the motion follows the visitor’s scroll position instead of running on a fixed clock. See Scroll-based animations.
• Coordinate two or more elements with a single scroll point. See Coordinating multiple elements.
• Tour every panel of the editor in The editor.