Instructional Designer

Parallax backgrounds – Continuous Motion Backgrounds in Storyline (Pt.1)

Have you ever wanted to have an animation (pt. 3) on a parallax motion background (pt.2) in your Storyline course? Well, I’m going to show you how! In this part 1of 3, I’ll take you through how to source the right kind of image to use as a background and how to program Storyline to make it a continuous motion. In part 2, we’ll make it parallax by adding in a foreground or two, and then in pt 3, we’ll add in an animation to tie it all together!

Let’s begin with the background image. You want something that is designed to be tiled either horizontally or vertically (we’ll be working horizontally) without any gaps or seams. Something that the right side when put next to the left side looks seamless.

We’ll be using the image below Designed by Katemangostar / Freepik). If you don’t use an image designed to be tiled, you could crop it, or try to import it into Storyline and then copy the image and reverse it so that the same sides meet each other.

Your going to want to import the image into your storyline file, and then make a copy. Put the copy right next to it on the right. Be sure to align the top and bottom exactly. Zoom in if you need to. Then group them together.

Next, arrange the images over your canvas so that it’s fully covered.

Now, your going to want to add an animation on this group. In my case, I want this to appear as if someone is walking down the street. So, I want the image to move to the left.

I’ve added an motion path, moving the whole grouped background image to the left. I renamed it so that I know what it is later, and then set my Path Options to Direction : None and Speed: Slow. (you can play with this to get the right look and feel you want. You will also want to play around with your duration to see how you can get the effect you want.

Now, your going to want to set the animation to run when the timeline starts, but also set it to restart when the animation completes.

Now, think about when/how/if you want this animation to end. In this case, I want it to keep going until a trigger stops it. I’ll be adding in a next button, and a trigger that says to move to the next slide when the users clicks the button.