No video

I Taught Framer Website Animations to a Subscriber

📞 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

Пікірлер: 38

  • @mland22
    @mland225 ай бұрын

    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!

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks a ton, Michael! I'm stoked you enjoyed the session, and I hope that, now it's been shared here on KZread, others can learn from it too.

  • @FloNocode

    @FloNocode

    5 ай бұрын

    Thx for you share your session this is useful

  • @JulianHowsonmedia
    @JulianHowsonmedia5 ай бұрын

    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!

  • @framer.university

    @framer.university

    5 ай бұрын

    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.

  • @cp3onmtv963
    @cp3onmtv9634 ай бұрын

    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)

  • @framer.university

    @framer.university

    4 ай бұрын

    I’m super happy to hear you enjoyed this format! I might make more of these :)

  • @garishanth
    @garishanth5 ай бұрын

    This is great to see man! 👏🏽

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks! :)

  • @Michael.design
    @Michael.design5 ай бұрын

    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!

  • @framer.university

    @framer.university

    5 ай бұрын

    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.

  • @Michael.design

    @Michael.design

    5 ай бұрын

    @@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!

  • @ProNoobDev
    @ProNoobDev5 ай бұрын

    This was cleaaaaaaaaaaaan and informative ! thanks

  • @framer.university

    @framer.university

    4 ай бұрын

    Glad it was helpful!

  • @DeWetikus
    @DeWetikus4 ай бұрын

    This was great!

  • @framer.university

    @framer.university

    4 ай бұрын

    Thanks! :) i hope u learned something

  • @user-sz1we5yy1c
    @user-sz1we5yy1c5 ай бұрын

    Thank you so much :)

  • @framer.university

    @framer.university

    5 ай бұрын

    Happy to help :)

  • @FloNocode
    @FloNocode5 ай бұрын

    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.

  • @framer.university

    @framer.university

    5 ай бұрын

    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.

  • @filipegoncalves3038
    @filipegoncalves30382 ай бұрын

    Thank you Nandi 🤠

  • @framer.university

    @framer.university

    2 ай бұрын

    My pleasure ✨

  • @DannyBlicher
    @DannyBlicher4 ай бұрын

    Wow really good video! When to use stack vs frame?

  • @framer.university

    @framer.university

    4 ай бұрын

    Prioritize stacks. Watch my latest vid.

  • @user-anum702
    @user-anum7025 ай бұрын

    Awesome as always Nandi🔥Hey i want to know about thr launch of the framer university course

  • @framer.university

    @framer.university

    5 ай бұрын

    Thanks! No exact date yet. Sorry! Stay tuned:)

  • @elias4314
    @elias43145 ай бұрын

    Hey, when is the course gonna release?

  • @FloNocode

    @FloNocode

    5 ай бұрын

    Ahahah definitely !!! 😂

  • @framer.university

    @framer.university

    5 ай бұрын

    No exact date yet. Working on other things atm. Stay tuned tho :)

  • @FloNocode

    @FloNocode

    5 ай бұрын

    @@framer.university that will be cool to make live stream in youtube sometimes

  • @SoumikMallick123
    @SoumikMallick1235 ай бұрын

    Courseeeee please.....I'm waiting for a long time....Launch soon as possible.

  • @framer.university

    @framer.university

    5 ай бұрын

    Will do buddy! Stay tuned :)

  • @zilhaj-4291

    @zilhaj-4291

    4 ай бұрын

    I also waiting from Bangladesh

  • @AnooBav
    @AnooBav5 ай бұрын

    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?

  • @framer.university

    @framer.university

    5 ай бұрын

    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?

  • @AnooBav

    @AnooBav

    5 ай бұрын

    @@framer.university Yes, make sense. Guess I don't need to stick with the hover state for every component. Thanks again.

  • @jazzeeblaze
    @jazzeeblaze5 ай бұрын

    It should have been me.... 😢😟😞

  • @framer.university

    @framer.university

    5 ай бұрын

    Feel free to schedule! 🫶