I Taught Framer Website Animations to a Subscriber
HTML-код
- Опубликовано: 19 июн 2024
- 📞 Schedule your support session: link.framer.university/support
🎓 Framer University: framer.university
👉 Create a free Framer account: framer.university/free-account
In this Framer tutorial, you'll see teach Framer website animations to one of my subscribers. I'll show how utilize components and variants to achieve amazing interactions without any code.
Project remix: framer.university/resources/l...
Original site: lightshiprv.com/
0:00 - Introduction
0:21 - The problem
1:38 - The roadmap
2:55 - Creating the card component
15:16 - Setting up the variants
18:33 - Reusing components with component variables
22:25 - Creating the wrapping container
23:45 - Adding variants to the wrapping container
25:22 - Setting up the interactions
27:48 - Adding max width to the wrapping container
28:35 - How to optimize this for mobile?
32:38 - Closing thoughts
33:54 - Schedule your Framer support session
Follow me on:
X: x.com/learnframer
Instagram: / framer.university
Nandi, what an awesome session together - really enjoyed the one-on-one. You have a wonderful way of making anything Framer easy to understand and implement. Great to be part of one!
Thanks a ton, Michael!
I'm stoked you enjoyed the session, and I hope that, now it's been shared here on RUclips, others can learn from it too.
Thx for you share your session this is useful
Please make more videos like this! I haven't even watched it but the reality is that it' s never as easy as you make it look Nandy and we will often run into problems!
I also run into problems! That's the nature of website building.
I just try to plan my videos carefully so we don't waste time with trying to debug.
This is great to see man! 👏🏽
Thanks! :)
Have to give you MAJOR props for this. Not only is this a cool animation that I dont see everyday, you also made it easy to follow along not only by watching but by the supplementary info you give while talking. Next, instead of just saying "oh you can do this or that for mobile" and moving on you actually took a few minutes to SHOW how that could be achieved, because that was going to be the question I was going to type instead of this lol. This is great for web but obviously the hover would not work for mobile/tablet. Anticipating possible issues like that one and giving a solution is definitely setting you apart from others. Keep it up! (you should make this a series by the way)
I’m super happy to hear you enjoyed this format! I might make more of these :)
This was cleaaaaaaaaaaaan and informative ! thanks
Glad it was helpful!
Thank you so much :)
Happy to help :)
This was great!
Thanks! :) i hope u learned something
Your are the G.O.A.T ! THANKS for this video. Can you make this animation in bento box design please and explain how use that in bento pleaaaase.
I'm glad to hear that you enjoyed this tutorial!
I may create a bento box tutorial in the future.
Meanwhile, it would be great practice for you to try it out based on what you've learned from this video.
Hey Nandi, since you’re the master of components, it would be really nice if you could do a video or a twitter thread on how to organize them.
I’ve noticed my components are scattered all over my Framer workplace: primary components that are in many different projects, not knowing which ones are in the library, unable to identify the ones in the library, how to go about making changes to them, do I unlink instances or do I go back and make changes to the primary first, etc etc.
Since you’re managing so much of them I wonder if you have a way to do this neatly. Maybe you keep all primaries in one single project?
I think it would be very helpful to alot of people out there! Thanks a lot in advance if you ever want to shine a light on it. Youre doing great work!
Thanks! This is a great question!
I never really add components to the library. I create new components for each project.
The components that show up on all of my demo sites (navbar for example) is housed in a template that I just duplicate each time I create a new demo.
Also you can organize components into folders within projects like “Elements/Button”. It’s also really useful.
You can definitely add component to your library if you wanna be able to easily reuse them across different projects. You can browse what’s in your library with ⌘ + K and the searching for “browse library”.
You can also “unlink and replace“ components brought over from other projects if you want to make changes to them that are specific to the project you’re working in. If you rather need a global change for the component, I’d navigate back to the project where it originates from (where you have its primary instance) and edit it over there so it will update across all your projects where you had used it. In this case you usually have to go back into each project and click the little update button next to the component on the assets panel.
Lemme know if you have any more questions.
@@framer.university Thanks a lot for the elaboration! Insightful to know how other people do these things as they're less often talked about. I find myself often just copying and pasting as well from other projects, even whole pages. I guess it's just a natural and easy way for most folks.
Would be nice in the future if Framer would make it easier to organize components, maybe with previews or something like that. It's hard to remember what a component actually looked like just based on the title. Maybe some way I haven't thought of yet haha.
For now we'll make it work somehow:) Again, appreciate the help!
Thank you Nandi 🤠
My pleasure ✨
Wow really good video!
When to use stack vs frame?
Prioritize stacks. Watch my latest vid.
Awesome as always Nandi🔥Hey i want to know about thr launch of the framer university course
Thanks!
No exact date yet. Sorry!
Stay tuned:)
Hey, when is the course gonna release?
Ahahah definitely !!! 😂
No exact date yet. Working on other things atm. Stay tuned tho :)
@@framer.university that will be cool to make live stream in youtube sometimes
Just what I was looking for, answered a few questions I was having regarding something similar. However, I have a question. Why did you create another variant instead of hover/pressed state feature of Framer for hover interaction?
Glad to hear it.
Because for the hover states I had to also specify the card's width in percentages which is relative to its parent frame (the wrapping container) and that's why it can't be set within the card component.
Does this answer make sense?
@@framer.university Yes, make sense. Guess I don't need to stick with the hover state for every component. Thanks again.
Courseeeee please.....I'm waiting for a long time....Launch soon as possible.
Will do buddy! Stay tuned :)
I also waiting from Bangladesh
Can you do a tutorial on ecommerce website ?
What exactly you wanna learn?
@@framer.university Hi, i am lost with the layout/wireframe, i don't know what layout i need to imagine for a website (e-commerce) and im 15 years old(sorry for my horrible english, im french).
It should have been me.... 😢😟😞
Feel free to schedule! 🫶