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)
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.
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.
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.
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.
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.
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?
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 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
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!
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.
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.
Wow matt, amazing tutorial, thanks for sharing ❤
Thank you!
Can’t wait to see more!! 🤩🤩… don’t stop plz
Crazy good. Thanks for this excellent tutorial!
Great tutorial!
Thanks Kumail!
Your tutorials are amazing, we want more!!!
This so good my god
Thank you!
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
Hey @mattjumper. loved your Framer tutorial, please create more advanced tips & tricks😊
Hey Matt, thank you for this tutorial, i want to ask you if this type of website can work for products
What app do you use for the clean video-recording background shot?
Awesome! ❤
Thanks Jorn!
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)
how do you learn how to make these?? Love the tutorial!
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.
Amazing content! I will definitely sub-
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 :)
Hii, please create a video for framer position property and uses
Excelente! Gracias =)
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.
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 :)
Goooood
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.
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
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!
How to make video responsive?🙁
did you figure this out?
Matt so handsome 🤣
😆
your photo in the center of screen is really annoying! why?? for what?