January 27, 2021

How To Create a Scrolling Website Video Mockup with Photoshop

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

Warning: Division by zero in /home/customer/www/moyo-studio.com/public_html/wp-content/plugins/flo-flex-builder/flo-flex-builder.php on line 375

Fabulous tutorial, such a great way to use your beautiful mock-ups. Just love your work!

This is amazing! Thank you for sharing 🙂

I have learn something new today! Thank you! Wow blown away! <3

Thanks Lucie, I am really pleased that you like the tutorial!

This is EXACTLY what I was looking for, thank you 🙂

Thanks Jordan, so glad it was helpful!

Wow, this was super helpful – now I’ve got yet another way to make most of your amazing mockups. Thank you!

Thanks Lisa, we are so pleased that the tutorial was helpful!

Wow, thank you so much for this great tutorial! I have been looking for how to do this but couldn’t find it. Now it’s easy!

Thanks Bea! We are so glad that it was useful and thank you for leaving a comment!

I totally love it!! Thank you so much for this tutorial video. It’s very helpful! Definitely, I’m going to do it!

Thanks so much Raquel, let us know how you got on!