- 67
- 62 485
NocodeTown
India
Registrace 22. 05. 2023
Framer tutorial : Create a scrollable gallery with tabs.(with remix )
In this video, we're going to create a sticky gallery with clickable tabs that change to relevant sections. For this, we'll use a scroll variant effect and create a tabs section component. Here is the Remix link and the link you can check out.
framer.com/projects/new?duplicate=FGEO1PlyezO94tad5n4F
simplified-globe-849384.framer.app/
Contact:
sahilchawlalm@outlook.com
framer.com/projects/new?duplicate=FGEO1PlyezO94tad5n4F
simplified-globe-849384.framer.app/
Contact:
sahilchawlalm@outlook.com
zhlédnutí: 45
Video
Framer tutorial: Create a sticky section and change tabs on scroll.(Remix include)
zhlédnutí 381Před měsícem
In this tutorial, I'm going to create a sticky section with tabs that change on scroll, similar to the official Framer website. After this, you will learn about section variables and how to bind nested section variables on a page, as well as how to create smooth transitions between variants on images. I will include a remix and a link with responsive design, using variables for image, scroll co...
Framer tutorial : Connect a Framer form to an Airtable webhook.
zhlédnutí 324Před 2 měsíci
#nocode #cms #tutorial #framer #uidesign This tutorial focuses on connecting a Framer form to an Airtable webhook using every input field. If you follow the steps carefully, you should be able to connect the forms easily.
Framer tutorial: How do I create a left-aligned slideshow in a component like on the Apple website.
zhlédnutí 208Před 3 měsíci
#nocode #framer #uidesign #uxdesign #cms This tutorial demonstrates how to create a left-aligned slider in Framer using components. For this, you have to wrap cards inside stack, position it absolutely, create variants, adjust its position, and incorporate arrow tap interactions. sahilchawlalm@outlook.com sahil8.framer.website
Framer tutorial: Change component variant according to specific CMS item.
zhlédnutí 214Před 3 měsíci
#webdesign #framer #cms #uidesign #nocode In this video, I'm going to show how to change a component variant inside a CMS list and connect it with CMS items accordingly. This way, you can also use it on a CMS detail page to change the component variant on a specific detail page. For example, you can use different designs on a detail page with one single component and a single detail page. Conta...
Framer tutorial : Create a fixed background
zhlédnutí 862Před 4 měsíci
#framer #tutorial #nocode #webdesign I'm going to show you how to create a fixed background in Framer and change the image through scroll variants. We are focusing on transitions to make changes easily, which is why we're not using visibility for show and hide; instead, we are using opacity. We have taken three variants for the component to make changes on scrolls with page scroll Contact: sahi...
Framer tutorial : Send automated emails to those who submit the form (formspark +pabbly )
zhlédnutí 586Před 4 měsíci
#webdesign #nocode #tutorial #uidesign #uxdesign Today, we're going to learn how to integrate Fromspark to Pabbly through webhooks and then automate email sending to people who fill out the form through your Gmail account. You can also use an email service for this. Make sure to set up authentication in Pabbly. I'm using Pabbly in the tutorial with a free account since they allow webhooks rathe...
Framer tutorial : Create lightbox in CMS
zhlédnutí 740Před 5 měsíci
#uidesign #tutorial #nocode #framer #cms #uxdesign In this tutorial, we will create a lightbox for CMS items featuring four images. Due to limitations, we'll manually create the lightbox for these four images since dynamic functionality isn't feasible. We'll ensure the lightbox functions properly with image changes upon appearance, incorporating delays and tap interactions. Additionally, we'll ...
Framer tutorial : Create a vertical menu with a fixed overlay.
zhlédnutí 487Před 5 měsíci
In this tutorial, I'm going to show you how to create a vertical menu with the help of a fixed overlay. We'll create a menu component with two variants, each with icon changes. Additionally, we'll make changes when the overlay opens because we can't capture the event on the page level. If we capture it for opening the overlay, there's no option to close the overlay. So, for the trigger, we'll u...
Framer tutorial: Overlay in CMS
zhlédnutí 404Před 6 měsíci
#framer #uidesign #nocode #tutorial Today, I'm going to show how to create an overlay in a CMS in just 4 minutes easily, When you add an overlay to a CMS item, the CMS items can be dynamically displayed inside the overlay according to the respective item. Contact: sahilchawlalm@outlook.com Website: sahil8.framer.website
Framer tutorial : Create a moving gradient
zhlédnutí 206Před 6 měsíci
#framer #uidesign #nocode #webdesign #tutorial In this tutorial, I create a moving gradient. Firstly, I export an SVG from Figma with a layer blur. Then, I import it into Framer, adjust the position of layers, and add a looping rotation effect. That's it. I don't apply blur in Framer because it impacts website performance; that's why I export the blur from Figma. Contact: Sahil chawla Website: ...
Framer tutorial : Custom cursor
zhlédnutí 120Před 7 měsíci
#framer #uidesign #tutorial #nocode #webdesign In this tutorial, I'm creating a custom web cursor using a component in a fun way, incorporating smileys. Additionally, for extra enjoyment, I'll be applying an appearing effect within the component. If the parent stack has a cursor, here's how to set it inside a card. Take it as a set, use transition, and obtain the cursor from the style inside to...
Framer tutorial : How to address the issue of nested links.
zhlédnutí 305Před 7 měsíci
#framer #nocode #tutorial #uidesign #webdesign In this tutorial, I'm going to demonstrate how to initially create a nested link issue, then resolve the nested issue. Additionally, if you create variant links for nested components and there is no link, it still presents a nested link issue. For SEO purposes, you must keep in mind that there should be no nested issues, whether in components or no...
Framer tutorial : Learn CMS in 20 Minutes:
zhlédnutí 436Před 7 měsíci
#tutorial #framer #nocode #webdesign In this tutorial, I'm going to demonstrate how to use Framer CMS for your project use cases, such as blogs and portfolios. I'll provide a comprehensive tutorial on CMS collections with filters, sorting, offset, and starting at. On the detail page, I'll manipulate visibility settings, ensuring that items on the same page, set, and filtered to collection lists...
Framer tutorial : Stacking card with offset
zhlédnutí 445Před 7 měsíci
#framer #nocode #webdesign #tutorial #uidesign In this tutorial, I'm gonna show you how to create a perfect stacking card with offset and solve the last card's natural movement behavior, which disturbs the total stacking card transition flow. Creating an offset for the card is equal to what the heading requires. Contact: sahilchawlalm@outlook.com Website : sahil8.framer.website
Framer tutorial : Explain everything about grids with aspect ratio
zhlédnutí 490Před 7 měsíci
Framer tutorial : Explain everything about grids with aspect ratio
Framer tutorial : Create a mega menu in Framer.(responsive+remix)
zhlédnutí 542Před 7 měsíci
Framer tutorial : Create a mega menu in Framer.(responsive remix)
Framer tutorial: Show current year in Framer (override).
zhlédnutí 216Před 8 měsíci
Framer tutorial: Show current year in Framer (override).
Framer tutorial : Create a wave section in Framer.
zhlédnutí 240Před 8 měsíci
Framer tutorial : Create a wave section in Framer.
Framer tutorial : Navbar show and hide on scroll
zhlédnutí 3,6KPřed 8 měsíci
Framer tutorial : Navbar show and hide on scroll
Framer tutorial : Create a price table and implement a toggle for change price. (Remix include)
zhlédnutí 333Před 8 měsíci
Framer tutorial : Create a price table and implement a toggle for change price. (Remix include)
Framer tutorial : Close the overlay from the component inside the overlay
zhlédnutí 1,2KPřed 8 měsíci
Framer tutorial : Close the overlay from the component inside the overlay
Framer tutorial : Create a perfect card in Framer.(Responsive + CMS )
zhlédnutí 307Před 8 měsíci
Framer tutorial : Create a perfect card in Framer.(Responsive CMS )
Framer tutorial : Change colour of page while scroll
zhlédnutí 4,3KPřed 8 měsíci
Framer tutorial : Change colour of page while scroll
Framer tutorial : How to create a fixed footer in framer
zhlédnutí 820Před 8 měsíci
Framer tutorial : How to create a fixed footer in framer
Framer tutorial : Create sidebar menu in framer
zhlédnutí 800Před 8 měsíci
Framer tutorial : Create sidebar menu in framer
Framer tutorial : Video plays on hover and resumes from the starting point after hovering back.
zhlédnutí 285Před 9 měsíci
Framer tutorial : Video plays on hover and resumes from the starting point after hovering back.
Framer tutorial : Mastering relative and fixed overlays in Framer
zhlédnutí 497Před 9 měsíci
Framer tutorial : Mastering relative and fixed overlays in Framer
ty for this vid
helpful, thanks.
The phone grid isn't wrapping on my own end..i don't know what to do ?
Can you share remix link?
Man, This is exactly what I needed, but the video is so bad explained, could not understand a single thing. What the hell man😩
Very helpful! It's okay to use bg music just have to be careful with the volume
Remove the music dude
Great! Straight to the point! Tahnk you so much
Merci ! Continuez les vidéos ça m’aide beaucoup ! 🙌🏼
Hello brother, I also managed to do this a couple of weeks ago with help and a lot of chatgpt, I wish I could have seen your tutorial, it would have saved me many days of suffering.. Now that I can create records, my goal is to be able to access historical records of my table from the framer form, that is, to search for a specific record and when I select it, all my filled data appears in the form and I can make changes from there as many times as I want. This is because I have workers in different places at the same time and it would be very complicated for them to enter the table where there are a thousand fields horizontally to update. If you have help, I would appreciate it.
I watched it for that image zooming in effect when you hover. Didn’t know you could do it with relative sizing. Thanks man! Keep going. Great stuff. 🎉
Bro damn. I was really trying to find a solution for this. Thanks a lot man.
thanks brother for sharing this!
can you do the talking while doing it because I'm lost
I don't know if I made a mistake, but my little arrow doesn't appear in the middle of the screen, people will only be able to see it when they scroll down the entire page, can you help me?
Can you share website link?
❤❤❤
Great video! keep it up 🙌
Thanks
Can this be done with 2 images as opposed to color?
Yes
pls reduce music volume, gret video tho
sure!
Who's Sara? 2:48
anyway, great video, keep hanging there Bro!!!
The code snippet is key to this component yet you neither share it nor show it long enough for someone to take a screenshot. So I got stuck at exactly that point with a half backed thing that I can’t use.
Sorry Description has been updated with the remix link.
@@NocodeTown-wl9ef Much appreciated.
can u share your remix link
framer.com/projects/new?duplicate=lGXXVbOxUsr49IJ7Ku4O
my cards scroll horizoontal but it does not complete all the cards and vertical scroll starts as well so ubale to get all the cards in the view while scrolling horizontal ? what to do ?
ty
Deserve a subscribe
Can we get a remix link?
Sorry for the late reply. Description has been updated with the remix link.
What's the point of this video?
Please don't add background music
Ok, got it!
OMG I could cry!! I have spent weeks trying to figure out how to have different blog layouts with one CMS collection and I couldn't figure it out. This solution is so simple I'm kicking myself for not thinking of it. Thank you thank you thank you!!!
How I Scroll over text along with hover ?
framer.com/projects/new?duplicate=wxrBnKEuGI8tZppelkOl
Man that's a life saver. I also like the theme of your channel. I also don't know coding but I want to bulid cool sites. Thanks, and keep up the good work
How to make this draggable?
Thank you! Great tutorial!
gem, subbed!
A genius is at work
You are SAVIOUR MAN👑👑
wtf with the bg music mate haha but nice explanation thx
This video saved my life 😭😭😭
No fluff, straight to the point. Thank you.
Can we put 0.8fr and 1fr to change the size of grids in the framer?
No, you can't set it to 0.8 in grid.
Hi, I've sent you an email
Hello, I would like to buy the name nocodetown from you. I bought domains and then I found out about u. Would you be eager to get paid for not using the name? If not, I won't use the name
Hello, I would like to buy the name nocodetown from you. I bought domains and then I found out about u. Would you be eager to get paid for not using the name? If not, I won't use the name
Can you add audio? I can’t follow what you’re doing.
Here it is : Blog page framer.com/projects/new?duplicate=pVD67UPY9D3Iy3j6d0lj
Can I upload mp4 or gif? If I have many different mp4 for different pages, should I upload them all as variables?
Can I upload mp4 or gif from my computer? also If I have 10 different mp4 video for different pages, do I need to upload them as 10 different variables?
Nice video
Like
Hey Bro, I need to talk to you
I wanna use my own video . What host can i use ?
You can use the bucket direct link, or if you obtain an embed code for the video link (video hosting app) , you can use the same plain text variable. In the CMS page detail, take the embed component and connect it with it; it works fine.