At Moyo, it’s no secret that we love our mockups. Whilst static images are awesome for showing a glimpse of a website, for those times when you want to show more features of your website design, the best way (and most fun!) to display this is with video.

Why create video mockups?

With attention spans shortening, creating video content is one of the most effective ways of capturing your audience’s attention on visual platforms such as Instagram and Pinterest.

These scrolling mockup animations can be used to showcase your latest website design projects, show the inside of your course or membership and are great for creating engaging content for your social media!

Website Mockup Animation 2 Ways

In this tutorial, you’ll learn how to create a scrolling website animation using a Photoshop mockup file and how to export them as a GIF or video.

In this video, we will demonstrate how to create a scrolling video mockup in 2 different ways, using Photoshop.

1.Using a pre-recorded video of a scrolling website

2.Using a static screenshot image to create an animation

Mockup Images

For this video, we have used 2 mockup images with pre-made smart layers taken from our Carmen Stock Photo & Mockup Collection.

We hope you enjoy creating scrolling website animations and be sure to tag us in your creations on IG using the #madebymoyo