KITSETLABS

Help › Changing your site

Make something move

You can decide what sets a thing moving, what it does, how far it goes and how long it takes - and put two or three of those in a row.

About 4 minutes

Most websites you like have this and you probably did not notice it, which is the point. A heading that rises into place as you scroll past reads as considered. The same heading spinning, flashing and bouncing reads as a website from 2007. The difference is not the feature, it is how much of it you use.

A movement belongs to one thing on the page. Click the thing you want to move, and Movement is at the bottom of the panel that opens.

There are four ways to set one off. "When it comes into view" is the one you want nearly every time: it happens as somebody scrolls down to it, once, and then it is done. "As soon as the page opens" suits the first thing at the top, because nobody scrolls to that. "When somebody points at it" and "when somebody taps it" are for a button or a card that is meant to respond.

Then you build the steps. A step is one thing happening: fading in, sliding in from a direction, growing, turning slightly, or sharpening from a blur. Each one has how far it travels and how long it takes, and a pause you can put before it. Two steps run one after the other, so "fade, then rise" is a thing you can build rather than a thing you have to settle for.

Four steps is the most, and four is more than almost anything needs. If you are reaching for the fourth, the thing to ask is whether anybody is still watching by the end of it.

Some people turn movement off on their phone or computer, usually because it makes them ill. Your site respects that automatically: they see everything, it just arrives without the travel. You do not have to do anything about it, and it is why you can use this without worrying about who is looking.

Step by step

  1. In the editor, click the thing you want to move.

  2. Scroll to the bottom of the panel and press "Add a movement".

  3. Pick what sets it off.

  4. Set the first step: what it does, how far, how long.

  5. Press "Play it" to watch it again without scrolling away.

  6. Add a second step if you want two things in a row.

  7. Publish when you are happy.

If it does not go to plan

I set it up and nothing happened.

If it is set to "when it comes into view", it has already happened - it ran while you were building it. Press "Play it" to see it again. If you are on a phone or computer set to reduce motion, that is doing exactly what it should: your visitors who have not asked for that will see the movement.

I added a second slide step and it does nothing.

You can only have one of each kind in a chain. Two slides would be fighting over the same thing and the second would win silently, so the list only offers you the kinds you have not used yet.

It looks jumpy.

Usually the duration. Under about a quarter of a second reads as a flicker rather than a movement. Try lengthening it before changing anything else.

Everything on the page moves and it is too much.

That is the usual mistake and it is easy to fix: take the movement off everything except the two or three things you actually want somebody to notice. Movement means "look at this", and if everything says it, nothing does.

Can I make it move again every time somebody scrolls past?

Not at the moment. It runs once, which is deliberate - a thing that re-animates every time it crosses the screen is the single most irritating thing a website does. If you want something repeatable, set it to happen when somebody taps it.

Next