Framer Tutorial: No-Code Animated Curved Carousel for Your Website
HTML-код
- Опубликовано: 19 июн 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 no-code curved carousel that animates on scroll in Framer. For this effect, we'll use the following Framer features: sticky positioning, scroll variant, component variables, scroll sections. By watching this video, you’ll be able to add a curved animated carousel to your Framer site without writing any code.
Remix the project: arc.learnframer.site/
Originally seen on: foundation.gucci.com/
00:00 - Introduction
00:39 - About the curved carousel
1:21 - Setting up the project
2:26 - Making the carousel
6:19 - Creating variables in Framer
7:28 - Adding component variants
8:59 - Placing the carousel on the website
10:03 - Setting up scroll variant effect
12:50 - Finished effect
13:43 - Conclusion & resources
Follow me on:
Twitter: / learnframer
Instagram: / framer.university
Unstoppable 🔥
He said "the only thing we can't achieve in framer is dragging", what you gonna do about that 🧐
We’re just gonna live with the scroll effects for now. 😛
Thanks, Jorn! 🔥
✨ One of the best teaching RUclipsrs
Thank you so much!
I’m still new to this and trying to figure things out! But I am really happy if I could convey concepts in a good way to you. 🫡
Magnificent, brilliant, greetings from Greece :)
Thanks a lot! :)
Thanks for sharing this for free!
My pleasure! Make sure on the framer.university waitlist, because I am coming out with amazing things soon!
how did you introduce the videos on the cards like the video of gucci and with the texts please ? this is the most important
you're soo underrated
Appreciate your support, Aditya! 🙏🥺
I’m thinking about switching to a new tool. Right now I’m still working on Wordpress (and Figma), but I’m hesitating between framer and webflow. I feel like framer is a tool especially made for designers, but I’m wondering if it provides all the possibilities for making larger websites for real clients. What are your thoughts on this?
I’d definitely encourage you to at least give Framer a go. You’ll then understand why designers love it so much.
You can definitely make sites for real clients with Framer. There is actually a growing demand for Framer developers. People are posting job opportunities every day in the Framer community.
If you start now, you can get ahead.
They also have an expert program: www.framer.com/experts/
Thank you, Great content, The speed though, the pace is a litle too fast for starters.. Thank you sir
That’s why I’m making a free course that covers the fundamentals for beginners.
Waitlist: framer.university
Can you the user also click on the cards to move them so say I was on card 1 but want to view card 4, can you just click on card 4 for it to be centered?
on the remix - it jumps 2 cards at a time and you can click to go back up to a previous card
Yes, you can set a link for the cards linked to that specific scroll section. That's how it works in the remix too.
If something is not working, feel free to send me a message on Twitter with some illustration maybe. Happy to help!
Had issues when trying to select the sections they was not appearing but i could see the variants... any idea what i did wrong?
Did you add the scroll sections to the section on the right panel?
How about card can clicked?
It can definitely be clicked!
I mean flipping card with 2 different each side image fliped when its clicked .-.
@@coffeeecatsss framer.university/resources/3d-card-flip-override
Sticky is not working... any idea why?
Set all parent frame’s overflow to visible.
Great content, Congrats! but you are going so fast when teaching, breathe bro :)
Thanks! :)
This is new for me so I'm trying to figure out whether I should go faster or not because if I'm too slow it might be boring for someone (I got feedback about being slow).
Trying to improve with every new video, so thanks for the feedback!
Framer needs to add a Drag trigger like figma.
You can already add drag effect to frames but that cannot be used for this specific effect unfortunately.
@@framer.university that is not the same drag transition
@@JamiltonMacedo yes, that's why I said that it cannot be used for this effect.
no uses los comandos por favor, porque no te entiendo