Framer Tutorial: Creating Fixed Footers (New Trend)
Вставка
- Опубліковано 27 лип 2024
- 🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll learn how to create a fixed footer on your Framer website. I'll show you what structure to use and how to implement fixed positioning to achieve this footer type. With the help of this video, you'll be able to add a fixed footer to your website without having to write any code.
Starter file + remix: framer.university/resources/f...
Inspiration: www.offgrid-design.co/
0:00 - Introduction
0:42 - What is a fixed footer?
1:42 - Project setup
4:06 - Positioning the footer
5:52 - Creating a helper section
7:28 - Making sure the footer is clickable
9:30 - Final words
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
0 out of 10 for teaching talent and attention retention
Such a sophisticated analysis Dr Potato Chips Troll
pin of shame
The footer gets overlooked so much and is naturally designed last. But it leaves a lasting impression. I also tried a large text of the brand name, it works well.
You’re absolutely right! :)
One of the best videos I've ever seen in my life, THANKS!!!!
Wow, thanks!
Your content always grabs my attention, keep posting! ❤
Happy to hear that!
Amazing as always.
Keep it up :)
Thanks, will do!
Great tutorial, thank you!
Appreciate your kind words :)
You are the best man!
Ahh noo! :))
I love your videos!
Love to hear it! Thanks 🙏
Thank you Nandi ! Gonna apply this to my site.
(though I think the background music is slightly bit too loud :)
Thanks for the kind words and for the feedback too! I’ll lower the volume next time.
I hope you can relsease course with animation advanced in frame. Thanks sir, Best tutorial website in the world
Yes! "Advanced Framer Animations" course coming next year!
Nice Video - Thanks 👍
Where do you get your background music and how is it called?
Thank your for your answer
Thanks!
Song: Jazz Bars - Dusty Decks
how to extend this to sections...?
I set the section above the footer to pointer none, but I still can't click the links
Hi! Thank you for your tutorial! I wanted to create this effect but had no idea how to. I have a question though! Z index option doesn't show up in my Style editor on the left when I create stack of all the section(you call it Main section here) before I add the footer in it. My Main section contains 3 stacks which contain title texts & cards of stacks (This is my portfolio site, the section contains basically just images & texts. Some has animation effect) Thank you inadvance!
*Style editor on the right
You’re welcome!
If you click the plus button next to styles you can add z index. It should be there since it can be added to any element
Hello, maybe you can make a step-by-step tutorial, from blank canvas to finished.
I have those type of tutorials as well. I can’t make each that way because every video would be 30-40 minutes long.
I like to keep the focus on the most important thing.
Hey Nandi, great video! Applied it to my website as well. However when I scroll quickly on mobile sometimes the footer can be seen between the sections, or when you interact with the website going from page to page snippets from the footer show up. Its like little cracks open up and then the back of the website is shown, in this case the footer. Do you have any idea why that is or how to fix this? Doesnt seems to be an issue on desktop tho. I’m on an iPhone X btw so might just be the ancient tech😅
This is something I also noticed on offgrid-design.co/
They also have the fixed footer and they also use Framer.
I have no idea what could be causing this 🤔
Might be worth posting it to framer.community/ bugs channel.
You're right. It also seems Offgrid disabled it on mobile, maybe because of it. Good idea! Will post on it later on.@@framer.university
perhaps adding a opacity effect until it get scrolled?
I have a problem. I want the background of one of my sections to be embedded HTML. (3D asset) however, when put above parent elements it will not show when previewing and when used on a section it doesn’t work for adding more content on top because everything needs to be a layout in order for this site to not break down… any ideas?
I would position the embed component absolutely, and pinning it to all sides with 0 values. Then just make sure that elements other than this embed have huge Z index than the embed so they appear above the embed.
Hope this helps:)
Great video Nandi, I'm using this for my portfolio. QUESTION! So in your example, the footer width is 1200px, which matches your viewport when you hit CMD + P (I'm using 1440px). But what about viewports that are wider than 1200px or 1440px? When I expand the viewport past my footer width (1440px) to see larger breakpoints, the viewport shows empty space to the right of my footer :( I want the footer to take up the full width of the screen. Please help me.
Nevermind I got it. Siblings needed to be 100% relative width. then I could make background (parent container) 100% relative width.
Glad you figured it out :)
Hey, great tutorial!
I was looking for something like this a couple of weeks ago, but I managed to recreate the fixed footer using scroll transform.
Basically, it's a similar approach:
make footer > set to absolute > z index 0 or 1 > main stack above > and when section or layer in view set the offset of the main stack to whatever needed to reveal the footer.
The only con to my approach is that you don't have as much control to the scroll as you have with the approach presented in the video.
Love your content! Keep it up!
ACVERA
Amazing! I love that we can do the same thing with different approaches. Thanks for sharing yours! :)
Do you think this whole footer component and the invisible helper section together could be a component placed to multiple pages?
You can only turn the footer into a component. The invisible section is separated in structure so couldn’t be wrapped in the same comp.
Hey! I have set the nav to navigate as scroll variant. But the nav item for this specific section isn't working with this kind of a footer.
Can you send a remix link to me in Twitter DMs?
Can you have two fixed elements? I have a fixed frame at the start, and I'm trying to incorporate this into the bottom but am unable to
You can have as many fixed elements as you like.
What would be the approach if I want to create a sticky footer like in the video, but want to have the main sections above it with a sticky scroll? In concrete terms, this means: I have a main body stack with different sections that scroll sticky. After the last section, the entire stack would have to scroll out of the viewport so that the fixed footer becomes visible. Unfortunately, I can't manage this. Does anyone have an idea?
I think you can use the same setup but make sure to set all sections to sticky positioning and all parent frame overflow’s to visible.
@@framer.university Even I am not able to achieve this. Moreover, I can't even pin the fixed footer to the bottom. For some reason, it's getting pinned at 600 pixels from the bottom. If I try to shift it, it behaves erratically.
Damn, my pointer events effect doesn't work for some reason..
You sure you added pointer events to the right element and set it to none?
bro,when is your gonna come out
Really soon. Stay tuned :)
Hey it doesn't work at all on my page, the footer stays above all the main content all the time :-(
Make sure that z-index is set according to the tutorial.
edit: it did work finally, but framer was very buggy :-( there should be easier ways to make sections overlap over AND under each other: ua-cam.com/video/4oA37S3ruqE/v-deo.html like this webflow example. Please Nandi
this literally doesnt work on any of my pages, i even copied and pasted it directly from the remix and its broken
It works perfectly for me:
fixed-footer.learnframer.site/
Did you follow each step in the tutorial carefully?
The parent frames are set to overflow visible in your project? Also the desktop breakpoint?
your speaking like you want me to fall asleep
Dude seriously hahah. It’s so soothing. You don’t want soothing for energy charged topics like design.
good topics, but teaching style?? meehhhh
I'll have to disagree. He managed to explain this in the easiest way I could understand as a framer newbie. I think he got this 🌺
dude this music sucks