I couldn't get the page to scroll down to the body section. It would just be stuck on the hero video. Replayed your video 3x and figured out that you set the body stack to Z-index 4! Once I did that, the page scrolls as designed. Just thought it might help others who face the same hiccup
One of the better tutorials here on youtube! Kudos ✨ - Love to see more about how you set up the responsive text styles and also how you add consistent hover effects, on elements that have different link URLs.
@@Produkthelt Thank you! The hero video is set to fixed so it doesn't scroll, and the body has a higher z-index (so it scrolls on top) and a white background (so it hides the content behind it). The hero type stack is the same height as the video (100vh), so the body starts right below the video (without the body type stack, the body would be starting at the top of the browser because the video is set to fixed)
I've tryed this tutoural 4 times now, dived into the comments for fixes. Really not sure what the issue is the body just wants to take over the hero regardless of z index, postion type.
Watched your recent video in flux academy. Would really love a Course like Ryan’s where you share the CMS and Components you created for your clients and the advanced stuff, or a tutorial on it. Love the two videos you have. It’s so heavy, would love more.
@@mattjumper Yes, please. I think there's a lot of content going on, and increasing every day, but it is almost for beginners. When it comes to advanced stuff, there is a short of tutorials or paid courses.
Broooo you did a big mistake in beautiful tutorial, it was going awesome until the point 8:07 where you said 'I already made a body previously' bro you shouldn't have made it previously. Now I can't figure out how to create body below hero section. I created body but it's not showing in preview. I'm STUCK after following nicely for 8 mins. please help bro. Reupload a video with how to add body below sticky scroll. PLEASE BRO.
I had the same issue. In your "desktop" stack at the top, make sure it's a vertical stack, then add a section as normal. once you create the content you like, it should work from there.
Does anyone know how to replicate this concept for many page sections? I have it working on the initial video - scroll to section, but what about another video scroll type section underneath it? If the positioning is absolute only, how do we replicate this.... 2-3 times on the webpage?
Great video, keep on going! Regarding the use of multiple H1 tags on a web page, this practice was more significant 5-10 years ago. However, with changes to how Google indexes websites, the impact of having multiple H1 tags has decreased substantially, so it's no longer a concern. There's even an official Google video about this topic, further explaining why it doesn't matter as much today.
Great tutorial! You helped a lot!! thanks!!! :) Do you think it would be possible to Show/Hide Nav On Scroll with Framer without coding? (when scroll down hide, scroll up appear)
Thank you! I love that nav scroll behaviour as well but right now it's not possible to do that without code. You can change the navigation state based on scroll section triggers but not by scroll direction.
Hey man, do you recommend designing in figma and take this design from it into framer with the plugin or is it unnecessary and you would do everything straight in framer to save time etc? Great content, keep it up!
Thanks Tsilko! I typically design in Figma first (right now it's still faster for me) but typically leave all the tedious stuff like inside pages and responsive states to Framer as well as all the explorations around animation, interactions, scroll behaviours, etc.
@@mattjumper Hello Matt, I clicked on the free remix link.However, I prefer to have a file of the assets to start from scratch. Anyway, Congrats on your new course
@@mattjumper I'm terribly sorry, I just rewatched and realized you were saying "Set to 100%" and I think I thought you were saying "Set two hundred percent." My mistake. 😄 Sometimes I am my own worst enemy. Great tutorial, I appreciate you brother, keep up the incredible work!
bro made the best tutorial on framer so far but fu*cked up at 8:07. it's been 16 hours still haven't figured out the body thing. tried adding body but not showing in preview. damn it.
Create a new stack and place it under the "hero content" stack (make sure it's under and not in it). If the height is set to fit you need content for it to actually scroll to, so for testing purposes you could put in a bunch of placeholder content or set the height of it to 100vh (the full height of your browser) to ensure it scrolls
Came back to this very video after a couple of months. Thanks for sharing once again
I couldn't get the page to scroll down to the body section. It would just be stuck on the hero video. Replayed your video 3x and figured out that you set the body stack to Z-index 4! Once I did that, the page scrolls as designed. Just thought it might help others who face the same hiccup
Amazing tutorial! 😍 Can’t wait to see more!
Thank you!
The acessibility perspective plus SEO was really a differential! Awesome content :)
Thank you!
One of the better tutorials here on youtube! Kudos ✨ - Love to see more about how you set up the responsive text styles and also how you add consistent hover effects, on elements that have different link URLs.
Another thing that's not 100% clear to me is how you manage to scroll the body over the Video hero?
@@Produkthelt Thank you!
The hero video is set to fixed so it doesn't scroll, and the body has a higher z-index (so it scrolls on top) and a white background (so it hides the content behind it). The hero type stack is the same height as the video (100vh), so the body starts right below the video (without the body type stack, the body would be starting at the top of the browser because the video is set to fixed)
Really nice tutorial…been struggling with the appear effect on type as the one you did in the video…was really helpful, thanks
Thanks Dee!
I've tryed this tutoural 4 times now, dived into the comments for fixes. Really not sure what the issue is the body just wants to take over the hero regardless of z index, postion type.
Watched your recent video in flux academy. Would really love a Course like Ryan’s where you share the CMS and Components you created for your clients and the advanced stuff, or a tutorial on it. Love the two videos you have. It’s so heavy, would love more.
Thank you! I'm considering a more advanced course/content around setting up components, CMS, etc. so thanks for letting me know:)
@@mattjumper Yes, please create a more advanced CMS course/content :)
@@mattjumper Yes, please. I think there's a lot of content going on, and increasing every day, but it is almost for beginners. When it comes to advanced stuff, there is a short of tutorials or paid courses.
Wow matt, amazing tutorial, thanks for sharing ❤
Thank you!
Broooo you did a big mistake in beautiful tutorial, it was going awesome until the point 8:07 where you said 'I already made a body previously' bro you shouldn't have made it previously. Now I can't figure out how to create body below hero section. I created body but it's not showing in preview. I'm STUCK after following nicely for 8 mins. please help bro. Reupload a video with how to add body below sticky scroll. PLEASE BRO.
I had the same issue. In your "desktop" stack at the top, make sure it's a vertical stack, then add a section as normal. once you create the content you like, it should work from there.
@@theblackstandard I've done all the things you said, but it still wont work for me
Nvm I got it fixed, I just need to put a placeholder section on top of the "body" to push down the "body" down
Great tutorial!
Thanks Kumail!
Can’t wait to see more!! 🤩🤩… don’t stop plz
Hey Matt, thank you for this tutorial, i want to ask you if this type of website can work for products
This so good my god
Thank you!
Your tutorials are amazing, we want more!!!
Crazy good. Thanks for this excellent tutorial!
Hey @mattjumper. loved your Framer tutorial, please create more advanced tips & tricks😊
Hii, please create a video for framer position property and uses
Awesome! ❤
Thanks Jorn!
how do you learn how to make these?? Love the tutorial!
Does anyone know how to replicate this concept for many page sections? I have it working on the initial video - scroll to section, but what about another video scroll type section underneath it? If the positioning is absolute only, how do we replicate this.... 2-3 times on the webpage?
You could use position sticky instead of fixed, and just remove the offsetting invisible container :)
Great video, keep on going! Regarding the use of multiple H1 tags on a web page, this practice was more significant 5-10 years ago. However, with changes to how Google indexes websites, the impact of having multiple H1 tags has decreased substantially, so it's no longer a concern. There's even an official Google video about this topic, further explaining why it doesn't matter as much today.
Great to know! Thank you
Great tutorial! You helped a lot!! thanks!!! :) Do you think it would be possible to Show/Hide Nav On Scroll with Framer without coding? (when scroll down hide, scroll up appear)
Thank you!
I love that nav scroll behaviour as well but right now it's not possible to do that without code. You can change the navigation state based on scroll section triggers but not by scroll direction.
@@mattjumper oh I thought so. Thanks for the reply :)
What app do you use for the clean video-recording background shot?
Hey man, do you recommend designing in figma and take this design from it into framer with the plugin or is it unnecessary and you would do everything straight in framer to save time etc? Great content, keep it up!
Thanks Tsilko! I typically design in Figma first (right now it's still faster for me) but typically leave all the tedious stuff like inside pages and responsive states to Framer as well as all the explorations around animation, interactions, scroll behaviours, etc.
Thanks for the tutorial. Love the large mouse, what software did you use to record this video? Thank you
Thanks! I use ScreenStudio (website: screen.studio)
My Tennis Club text always disappears when I set the layout direction to vertical :/
You can send me a DM on twitter @mattjumper or email jumper@madebymod.co and I can help! Either send a video of your Framer file or a remix link.
@@mattjumper I'm gonna restart for the 4th time and if it still does it I'll dm you, I appreciate it!
Amazing content! I will definitely sub-
I subscribed to your website. However, I did not receive the files of this tutorial
there shouldn't be any issues there, did you click on the free remix link in the description and follow the instructions?
@@mattjumper Hello Matt, I clicked on the free remix link.However, I prefer to have a file of the assets to start from scratch. Anyway, Congrats on your new course
Many thanks Matt, you're killing it. QUESTION: Why are you setting the WIDTH to 200%, when Framer seems to be resetting it to 100%? THNX :)
Thank you @whofarted69 😆 what's the time stamp where I set something to 200%? Sorry been a minute since I recorded this!
@@mattjumper I'm terribly sorry, I just rewatched and realized you were saying "Set to 100%" and I think I thought you were saying "Set two hundred percent."
My mistake. 😄 Sometimes I am my own worst enemy.
Great tutorial, I appreciate you brother, keep up the incredible work!
Haha all good, thank you! @@See_thru_it_all
How to make video responsive?🙁
did you figure this out?
bro made the best tutorial on framer so far but fu*cked up at 8:07. it's been 16 hours still haven't figured out the body thing. tried adding body but not showing in preview. damn it.
Create a new stack and place it under the "hero content" stack (make sure it's under and not in it). If the height is set to fit you need content for it to actually scroll to, so for testing purposes you could put in a bunch of placeholder content or set the height of it to 100vh (the full height of your browser) to ensure it scrolls
@@mattjumper thanks bro I made it.
Excelente! Gracias =)
Thank you!
Goooood
Matt so handsome 🤣
😆
your photo in the center of screen is really annoying! why?? for what?