Thank you for this. Another idea, instead of using the selection tool is to use smart objects. That will help you fit an animation into those angled screens that you mentioned at the beginning of the tutorial.
Double click the smart object and it will bring you into a new file. Add the website screenshot and add the timeline. Save and go back to the original file and it will be there. Save out the same way.
The Photoshop steps are very clear, thanks! But something weird is happening when I upload the exported GIFs to my gallery section in Squarespace. I'm using the slideshow reel gallery type, FWIW. Multiple copies of the same GIF appear in the section, even though I have only uploaded two GIFs total, and they repeat infinitely. I guess it's OK for them to repeat infinitely; I'm just wondering why that doesn't happen with the gallery sections that contain JPGs.
I'm not 100% sure what type of gallery you're using (as there's a few different ways/types) but if you have continuous scrolling on then the same items will just keep rotating around as you go through. If you don't have that on, then it sounds like a glitch and I would reach out to Squarespace and ask!
![[Photoshop tutorial] Create a GIF scroll animation mockup to show your website](http://i.ytimg.com/vi/INx5HXjjkGY/mqdefault.jpg)
![[Photoshop tutorial] Create a GIF scroll animation mockup to show your website](/img/tr.png)
This was so helpful! I didn't know I could do this in PS!
Thanks for sharing , very helpful!
Wow!!! This is awesome!! I don't think Photoshop can do the animatio like this!!! OMG!!! Thanks for sharing this tutorial. It really helps a lot!!
Simple and straight! You are awesome
Loved this! Thanks so much :)
Thank you for this. Another idea, instead of using the selection tool is to use smart objects. That will help you fit an animation into those angled screens that you mentioned at the beginning of the tutorial.
Double click the smart object and it will bring you into a new file. Add the website screenshot and add the timeline. Save and go back to the original file and it will be there. Save out the same way.
Thanks for the value provided with your video.
Exactly what I was looking for and it works great!
Well this is fantastic! Thank you so much! Always looking to up our game and I don't have time to search web to figure this out. LOVE IT
I actually prefer this to canva. Thank you for sharing.
wanderfull, thank you so much
Great tutorial! Thank you :)
nice and easy
Thank you so much for this! Simple and easy to follow.
tysm!
Such an amazing tutorial 🙌 Which do you prefer for this - Photoshop or Canva?
Hey Susanne! Both are great but we recommend Canva if you're not well versed in Photoshop as it's just sooo much easier!
GOOD!!!
The Photoshop steps are very clear, thanks! But something weird is happening when I upload the exported GIFs to my gallery section in Squarespace. I'm using the slideshow reel gallery type, FWIW. Multiple copies of the same GIF appear in the section, even though I have only uploaded two GIFs total, and they repeat infinitely. I guess it's OK for them to repeat infinitely; I'm just wondering why that doesn't happen with the gallery sections that contain JPGs.
I'm not 100% sure what type of gallery you're using (as there's a few different ways/types) but if you have continuous scrolling on then the same items will just keep rotating around as you go through. If you don't have that on, then it sounds like a glitch and I would reach out to Squarespace and ask!
Hey! When I enter the second frame, my 1st frame changes to 2nd one. Why is it so??
same happens here