Thank you so so much! Asked a couple fellow designers and it seems everyone wants to keep the secret! Thank you for being open to sharing! :) We all win!
i dont mean to be offtopic but does any of you know a trick to log back into an Instagram account..? I somehow lost the login password. I appreciate any tricks you can offer me.
Truly appreciate this tutorial! She made it very simple and was clear and concise in her step-by-step instructions. Created a scrolling website GIF in minutes after watching this tutorial. Can't wait for more videos!
That was the BEST video! Thank you so very much! Your instructions were so clear and easy to follow. AND, it's amazing how something that appears as if it would be so difficult is really quite easy (again, due to your instructions). :)
Your tutorial is quite helpful specially for the amateurs,I request you please be a little louder so that your words can be followed.And please make your video with a zoom in view.Thank you
I have watched this video multiple times, and can't figure one issue out. When I create a new frame it automatically creates a new empty layer in my layers panel titled "Frame 2". It appears it is linking my frames to my layers. When I click on the image to move the website to the bottom and hit enter, it changes both frames to be at the bottom, not one on top and one on the bottom. I've watched multiple videos and tutorials trying to resolve this issue. I don't know if this is because I am working with Photoshop CC 2019 or not, but if anyone can offer feedback, I would greatly appreciate it! Thanks!
Some thoughts I had was maybe if you created your Photoshop file with artboards? The second is that there seems to be a new Frame tool in that version of Photoshop. I haven't used it before, but maybe someone can have some insight on that. There could be a way to turn it off. Sorry I don't have a solution!
Hi there! I just had the same issue like you and hopefully, we're in the same boat of how this got triggered, I noticed when moving the second frame or what have you, I have the Transform (CMD+T) selector on as of my habit, so after moved and hit Enter it will sync the rest. Then I tried to just use Shift & drag your mouse, it only changes the frame you are currently on. Try this and let me know if it helps!
Also for a smooth scrolling effect, I tried at least 120 frames with 0 delays, sort of like how you would scroll on a fone without pause, you can play around with halfway through and add the delay in one or 2 to create human-like scrolling effect.
Is there a way to do this using smart objects? This method works great for straight on shots but I'm having trouble finding a way to do it on an image where the screen is at an angle.
I’m having trouble with the last part. My frames are copying each other and I can’t get one frame to go to the bottom of the website with out the other one doing the same. How did you separate the frames?
Hmm may have to search it if you're still having issues. Sometimes when they get stuck together like that I delete the frames and start over to clear it. Sorry I don't have a more specific answer :/
Very helpful video! Thank you for the tips! This topic is a good opportunity to ease people into After Effects. If anyone finds this process EASY you will love AE. If you found this process DIFFICULT ... you will LOVE AE even more. If anyone wants to learn I would be happy to make a tutorial! Not trying to spam your comments, I just like to help people that are interested in the field. I stumbled across this video looking for a way to make videos play on a website by scrolling, like you see on Apples product pages. Thanks again for the tips! Cheers! Edit: “LOVE AE *even more*”
Hey thanks so much for this - I've done this tutorial before and it worked perfectly for me, but for some reason, my frame images remain the same, even when I scroll to the bottom of the image. Do you know why this might be?
Hi Anna. Sometimes if you add an image after your frames have already been made, it can throw things out of balance. The only recommendation I have is deleting your frames and starting over from the beginning. Photoshop does some strange things, and troubleshooting it without seeing the error will be difficult for me. I'm sorry I can't be more helpful!
Thanks for this, super helpful. When saving the file for the web, do you have to anything to optimize the file so the size isn't too large? I don't want to slow down the site.
Hannah, my web page is probably double the length of the one in your demo. How many frames would you suggest? Mine seems a bit choppy when I put it at .2 sec a frame but way TOO FAST when I put it at .1. Any sort of rule of thumb? I've tried from 30 frames to 100 and can't find the happy medium. (Your tutorial worked like a charm, though). Thanks for the help!!!!
Oh thanks! This is really useful, I am updating my book after 2 1/2 working in the same place, and wanted to show my web designs. Now, I'm thinking that this is so heavy to put in on a pdf. Anyway I don´t even know if a PDF supports it. The other solution maybe upload it on my website :)
This is amazing! What would you do when the two frames are showing the same thing? Every time I scroll to bring the second frame to the bottom of the site, the first one updates what #2 is showing, and vice versa :-(
@@oaklynstudio you know what, I forgot to come back on here and delete this comment because that was exactly the problem! This tutorial saved my life! Thank y’all so much for all you do!
Mockups with the computer angled get a little difficult. Because as the website image scrolls up, it will look like it's also shifting to the left or right. You'll have to manually go into each frame and shift the image left or right to keep it aligned as it scrolls. However, the animation won't look very smooth.
Hello, thanks for sharing this. Is it possible to export this type of idea to a format like PDF or JPG, where the user would have the ability to manually scroll the image up and down in a continuous loop? I'm a guitar player and I have an idea of a fretboard practice tool that I want to make, but haven't been able to figure out how to do it yet. This video seems to be the best starting place for me to go about making it. I would definitely need to have boarders on the top and bottom of the image that are stationery with everything inside able to manually scroll up and down in a continuous loop. An MP4 can kind of work I guess by playing and pausing it, but I want something that moves completely manual by the user. I'm a novice at best with graphic design, so I imagine it may not be hard to do. Any ideas you have would be greatly appreciated
![[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)
Brilliant guide. Probably the first time I have followed a guide on UA-cam and not got frustrated after 2 minutes!
Check out his one. It's WAAAY smoother:
louisehenry.com/blog/scrolling-website-animation
Thank you so so much! Asked a couple fellow designers and it seems everyone wants to keep the secret! Thank you for being open to sharing! :) We all win!
i dont mean to be offtopic but does any of you know a trick to log back into an Instagram account..?
I somehow lost the login password. I appreciate any tricks you can offer me.
Truly appreciate this tutorial! She made it very simple and was clear and concise in her step-by-step instructions. Created a scrolling website GIF in minutes after watching this tutorial. Can't wait for more videos!
SO clear and easy to follow. Best tutorial I've seen on UA-cam in a LONG time. Thank you so much for making this!
You are amazing. I have come back to this video over and over again. You have great teaching skills. Thanks!
Thank you! I had read instructions on how to do this, but it was waaaay easier to learn by seeing it. Thanks!!
This is really helpful... Unfortunately, not so many people want to show others, how it's done... You are the best 😍
Thank you so much! I've watched three videos on how to do this and yours was the most clear and the only one that worked! Thank you!!
yay! Glad to hear. Thank you :)
straight to the point and clearly spoken...awesome
I just want to thank you so much for taking the time to make this. it is so simple and pretty much life changing information
Nice work. Clear preso. Next level is creating this animation on an angled screen!
Thank you so much for this. This looked a lot easier than most videos I've watch.
Thank you so much for posting this. Super helpful!
That was the BEST video! Thank you so very much! Your instructions were so clear and easy to follow. AND, it's amazing how something that appears as if it would be so difficult is really quite easy (again, due to your instructions). :)
Thank you so much for helping a designer out! My first animation kept turning out choppy, but I think the tween was the secret ingredient I missed! ❤
This is awesome tutorial. Thank you!
Thanks! was trying to remember how to do this, you made it simple.
Even in 2020 this tut is very useful! Thanks so much!
Thank you so much for this tutorial!
Thank you for this- so easy to follow!
Thank you! Wonderfully simple explanation.
So well done! Keep doing these. You've got a great way of explaining things.
Thanks, MAM For explaining in simple words 😊
Muchas Gracias, Excelente tip y explicación.
Exactly what I was looking for, thank you!
Thanks so much! I've wanted to know how to do this for so long. Great video!
Excellent video, thanks for sharing!
This video is useful. That Capture Chrome plugin is useful. Thanks!
really good.....innovation and u well
So helpful! Thank you!!!
Thank you for this video ....💕💕💕💕:)
Sooooo helpful! Thank you so much for this Hannah!
This is so great! Thank you for sharing with us!
Awesome! Thank you very much
This was so incredibly helpful. Thanks!
It was so helpful for me, thank you!
So helpful thanks!
Thank you!!! So simple, it would have taken me forever to figure out on my own
Fantastic, thank you soooooo much
Thank you! It helped me a lot!
Thank you so much for doing this & making it so dang simple!
very handy tutorial! thanks a lot Hannah
Thank you! I like your explanations
Great video! Thank you so much!
Really helpful. Thanks!
Wow, you made it so easy!! THANK YOU!!!!!!! :-)
amazing !!! thank you very much i had to try different extensions for screen capture, the photoshop part was on point. You Rock !!!
This was amazing - so clear and easy to follow, thank you so much for sharing🙏🙏🙏
Thank you so much! This was incredibly helpful!
Wow, super easy to follow. Thanx a lot!
That is super easy and useful! Thanks a lot!
Ohhhhh thank you!!! Super easy!!!!!
Great work! It's a very helpfull hands-on tutorial that helped me getting the job done! Thank you for sharing your knowledge & expertise with us!
bless your beautiful soul for this video
Thank you, this video was so so helpfull !
Thank you very much, this is super helpful!
Nice tutorial. Thanks!
This worked wonders!!! Thanks so much!!!
Super useful!!!
Absolutely great - exactly what I was looking for, thank you so much. Really appreciated! And so well explained, also. :)
Thanks a lot Hannah, i was searching for this from last 1 weeek
Amazing video! Thank you so much. You saved me a ton of time (and money).
You're a Genius
Thank you !! Keep up
very well explained thanks!
This was so helpful!! Thank you!!
ok u just saved my life
Thank you so much!
Thank you! This is so helpful!
THIS HELPED ME SO MUCH THANK YOUUUUUUUUU
it help me so much :) thx
Love this simple tutorial! Quick question - When I render video, it does not keep the forever looping. Suggestions?
On your timeline in the dropbox make sure it says "Forever" and not "Once" or other single play options.
Lifesaver! Thank you!
You save my life
Very useful. Thank you so much :)
Thank you so much super helpful!
not even what im looking for but lit...
Thank you so much! You're great!!!!
Your tutorial is quite helpful specially for the amateurs,I request you please be a little louder so that your words can be followed.And please make your video with a zoom in view.Thank you
I have watched this video multiple times, and can't figure one issue out. When I create a new frame it automatically creates a new empty layer in my layers panel titled "Frame 2". It appears it is linking my frames to my layers. When I click on the image to move the website to the bottom and hit enter, it changes both frames to be at the bottom, not one on top and one on the bottom. I've watched multiple videos and tutorials trying to resolve this issue. I don't know if this is because I am working with Photoshop CC 2019 or not, but if anyone can offer feedback, I would greatly appreciate it! Thanks!
Some thoughts I had was maybe if you created your Photoshop file with artboards? The second is that there seems to be a new Frame tool in that version of Photoshop. I haven't used it before, but maybe someone can have some insight on that. There could be a way to turn it off. Sorry I don't have a solution!
Hi there! I just had the same issue like you and hopefully, we're in the same boat of how this got triggered, I noticed when moving the second frame or what have you, I have the Transform (CMD+T) selector on as of my habit, so after moved and hit Enter it will sync the rest. Then I tried to just use Shift & drag your mouse, it only changes the frame you are currently on. Try this and let me know if it helps!
Also for a smooth scrolling effect, I tried at least 120 frames with 0 delays, sort of like how you would scroll on a fone without pause, you can play around with halfway through and add the delay in one or 2 to create human-like scrolling effect.
Hi there, this video was a great help. I would just like to ask how do I add multiple frames with other images as a continuance?
To clarify: after one image finishes scrolling, you'd like to add another image to start scrolling?
@@owlize5071 Yes that's correct.
Thank you! :)
This is much better than using After Effect
Is there a way to do this using smart objects? This method works great for straight on shots but I'm having trouble finding a way to do it on an image where the screen is at an angle.
I ran across this problem myself but haven't found a solution for it. I'll look into it though!
@@oaklynstudio Cheers, thanks for the reply! For what it's worth, I haven't found a solution either
So useful, thank you!
I’m having trouble with the last part. My frames are copying each other and I can’t get one frame to go to the bottom of the website with out the other one doing the same. How did you separate the frames?
Hmm may have to search it if you're still having issues. Sometimes when they get stuck together like that I delete the frames and start over to clear it. Sorry I don't have a more specific answer :/
Make sure you’re using the move tool and not moving the object with command T
You the best💖💖💖
Very helpful video! Thank you for the tips! This topic is a good opportunity to ease people into After Effects. If anyone finds this process EASY you will love AE. If you found this process DIFFICULT ... you will LOVE AE even more. If anyone wants to learn I would be happy to make a tutorial! Not trying to spam your comments, I just like to help people that are interested in the field.
I stumbled across this video looking for a way to make videos play on a website by scrolling, like you see on Apples product pages. Thanks again for the tips! Cheers!
Edit: “LOVE AE *even more*”
Smart Lady ... Thanking you
I actually liked your explanation, why did you stop making tutorials/videos?
Wow Clear and simple --- Thank you!
really really helpfull, thanks a lot!
Hey thanks so much for this - I've done this tutorial before and it worked perfectly for me, but for some reason, my frame images remain the same, even when I scroll to the bottom of the image. Do you know why this might be?
Hi Anna. Sometimes if you add an image after your frames have already been made, it can throw things out of balance. The only recommendation I have is deleting your frames and starting over from the beginning. Photoshop does some strange things, and troubleshooting it without seeing the error will be difficult for me. I'm sorry I can't be more helpful!
@@oaklynstudio yeah I thought it was odd as I’ve done it before with no problems! Thanks for getting back 😊
I love you, thanks ♥️
Thank you! 🙏
Thanks for this, super helpful. When saving the file for the web, do you have to anything to optimize the file so the size isn't too large? I don't want to slow down the site.
Does it work for animations?
Hannah, my web page is probably double the length of the one in your demo. How many frames would you suggest? Mine seems a bit choppy when I put it at .2 sec a frame but way TOO FAST when I put it at .1. Any sort of rule of thumb? I've tried from 30 frames to 100 and can't find the happy medium. (Your tutorial worked like a charm, though). Thanks for the help!!!!
Oh thanks! This is really useful, I am updating my book after 2 1/2 working in the same place, and wanted to show my web designs. Now, I'm thinking that this is so heavy to put in on a pdf. Anyway I don´t even know if a PDF supports it.
The other solution maybe upload it on my website :)
You can put a GIF into a PDF. Maybe this would help? stackoverflow.com/questions/9009771/is-it-possible-to-embed-animated-gifs-in-pdfs
This is amazing! What would you do when the two frames are showing the same thing? Every time I scroll to bring the second frame to the bottom of the site, the first one updates what #2 is showing, and vice versa :-(
This might be happening if you are using the Transform tool (cmd+t) instead of using the move tool (shift & drag). Hope this helps!
@@oaklynstudio you know what, I forgot to come back on here and delete this comment because that was exactly the problem!
This tutorial saved my life!
Thank y’all so much for all you do!
Great video! thank you so much :) but would it be possible to do it using a mockup? specially if the computer it's a little angled?
Mockups with the computer angled get a little difficult. Because as the website image scrolls up, it will look like it's also shifting to the left or right. You'll have to manually go into each frame and shift the image left or right to keep it aligned as it scrolls. However, the animation won't look very smooth.
Hello, thanks for sharing this. Is it possible to export this type of idea to a format like PDF or JPG, where the user would have the ability to manually scroll the image up and down in a continuous loop? I'm a guitar player and I have an idea of a fretboard practice tool that I want to make, but haven't been able to figure out how to do it yet. This video seems to be the best starting place for me to go about making it. I would definitely need to have boarders on the top and bottom of the image that are stationery with everything inside able to manually scroll up and down in a continuous loop. An MP4 can kind of work I guess by playing and pausing it, but I want something that moves completely manual by the user. I'm a novice at best with graphic design, so I imagine it may not be hard to do. Any ideas you have would be greatly appreciated
Hmmmm. That's a good question. I think you could do something like that on a website via code, but that isn't my speciality.