How do I create a looping background?

This article will outline suggested practices for looping backgrounds, and how to use the Transform-Loop node.

Step 1: Create seamless artwork

If you want your background to look smooth as it loops, it’s best to make it seamless. This means that the ends of the background should meet up seamlessly when placed next to each other. A background that isn’t seamless will jump when looping.There are some ways to guarantee the beginning and end of the background line up seamlessly:

• Have a small section of the start of the background overlap the end position.
• If possible, try and keep the background details simpler in the area where the seam would be. Having more detail on the seam can make lining it up more difficult.
• Most drawing software applications have tools to assist in creating a seamless background.
• Double check the seam of the background in a drawing software before importing into Harmony. 

Step 2: Use the Transform-Loop node

1. Import the background image into Harmony.
2. In the Node view or Timeline view, create a single peg for the background layer/s.
3. In the Timeline view, keyframe the start and end positions of the background on the peg layer.
4. Create a Motion Keyframe between the positions. Make sure there are no eases or it will look like the background is slowing down and speeding up.
5. In the Node view, add a Transform-Loop node by doing one of the following:
   • Press Enter and search for the Transform-Loop node.
   • In the Node Library view, under the Move section, click and drag the Transform-Loop node into the Node view.
6. Connect the Transform-Loop node under the peg that has the background animation.

7. The default setting for the Transform-Loop node will automatically create a looping background.

Q&A 

Question: 

My background doesn’t seem to be lining up? 

Answers: 

1. Double check that the background is seamless and adjust if needed.
2. Use the Onion Skin tool to confirm that the keyed ending position is aligned with the keyed beginning position.
3. If you have Automatic Range Detection selected in the properties of the Transform-Loop node, check there are no unintended keys on the background peg in the timeline.
4. Double check the alignment of the background using the Show Onion Skin tool or using the Coordinates toolbar. If the background is moving left to right, the Y axis should be consistent, and if it's moving up and down, the X axis should remain consistent. If  the layout is moving diagonally, the Show Onion Skin tool will help you double check the alignment of the first and last keys.
5. Double check the Transform-Loop is set to Repeat.