This is the easiest way to create a scrolling website animation to launch your new website!

Recently we redesigned the Waves Digital website and we went to share it on Instagram like this: 

http://www.instagram.com/wavesdigitalca

After we launched we realized that a lot of people wanted to know how to create this scrolling animation as easily as possible. 

If you’re like, ‘omg, I don’t even have a website yet,’ don’t worry I got chu. Building websites is what we do over at wavesdigitalcanada.com. If we haven’t met yet, hi, I’m Marie. I put out new videos every single week, all about making the tech in your online business easier. So if that is something you could use a little bit of help with, subscribe to our youtube channel

How to Create a Scrolling Website Animation

1.Get the Google Chrome extension Simple Auto Scroll. Click add to chrome and it will automatically be added to your browser.

2. Navigate to the website you want to capture and open QuickTime Player. Essentially we will be recording our screen while it auto scrolls.

3. Click File and then New Screen Recording and a record button will appear. Click record and you will see a prompt that gives you options. Click anywhere on your screen to start the recording and make your browser full screen. Click the Simple Auto Scroll extension and wait for the entire website to be scrolled through. Once it’s finished click the stop button in your browser and it is completed.

Pro tip: If you find that your scroll is too slow or too fast you can set the scroll speed by right-clicking the extension and hitting options.

4. Trim to just what you need. Once you end the screen recording, you’ll be left with a video that you can trim to be just what you need. You can do this within QuickTime Player, which saves you time later!

5. Find an image or graphic that you want to place the animation in. We grabbed one from pixabay but we also recommend pexels.

6. Open up whatever video editing software you wish to use and from there you will be able to overlay any graphic on top of your video or vice versa.  For this video, we will use Adobe Premiere Pro (you can get a free trial of this!). Start a new project, right-click your media bin on the bottom left and click Import. Select the image you want to put the video in and the screen recording. Drag both of these items to your workspace on the bottom right.

Be sure the image is on the line below your video since these act as layers and you want the image on the bottom. If you are savvy with Photoshop you could also magic wand out the pixels inside the screen there so that you can put the image on the top layer and you have a more true framing of your recording. Since the image I have here was almost exactly centered, the framing wasn’t an issue.

Right-click your image in your workspace and hit Set to Frame Size to make your image cover the full frame. Now select the video in your workspace and on the top left panel click Scale. Drag your video to set the right sizing to fit in your desktop frame.

Once it is perfectly placed you can test it by hitting play. Go to File > Export to finish your animation.

Well done. Your animation is done! Go ahead, share this out on social media and celebrate your website launch.

If you do not have a website yet, I have an amazing website package that will help you quickly and easily get the website of your DREAMS and right now, you can have it for 20% off ($500 savings).