Really like Framer's component facility, much easier to digest that Webflow's classes / combo classes which can get v.complex to manage over a project I imagine!
I've been trying to understand how to use event variables for so long and I believe this is the first tutorial I've come across that explains how to use them. I would really appreciate to see more examples of how we can use them. Thanks Nandi, you rock! 🙌🤘
Nandi make a tutorial on that dynamic menu component in the beginning of the video!! thats something you should post on youtube cause explaining what components are, is explained by thousands of others framer experts.What you teach and explains in the tutorials of building complex components which can be helpful in websites makes us watch and wait for your new videos!!!!
@@framer.university thanks for the replay, i bougth a package from a guy with transitions but in one of the upgrades in framer stop working, i would like to have any advice for solving this because i dont have any responde from the creador, but again, thanks for the support you are doing grate! ❤️
Thank you, Nandi, for how you conducted the event variables, which really inspired me to adapt the feature to create a slide menu. I had some troubles with overlay before I saw your video, Now, I know how to deal with the issue. I'm a big fan of Framer University, and from several of your first tutorials, I learned a lot from you. On again thank you a lot.
Dope video pro. To go back to the ON state you can click at the top where it says interactions and change it from "Off" to "Cycle Variant" saves yu having to link back to it
Very well explained!! Thanks for making the video and sharing these gems with us! I'd love to know how to do the bento card animations :) like the ones that show the benefits/ features of a product Thanks!! Have a great day!!
Hey! Thanks for the kind words! For a bento anim, you turn each bento box into a compoment and you add a hover state to each, where you change some things about the comp like color, element’s position change and so on.
Great video, thanks for the valuable content. However, I'm having trouble understanding the notion of event for the overlay. Why isn't event 1 displayed for the overlay and why do we have to create an event chain?
Good question! Because the event we create is always only visible on one layer back. So we have a nesting like: Homepage > Resource Card > Quick Preview Button. The event created on the Quick Preview Button will be accessible on one “layer of nesting” back, so in Resource Card. There, we can use it for an interaction, or if we decide that we wanna use the event on one layer back (Homepage) we can create another event on it, making a chain of events, pulling it to the outside (Homepage) so we can use it there as trigger for “show on” property of overlay. Lmk of this explanation makes sense! :)
Thank you for the great video. I’d like to ask about a problem I’m encountering, and I’m not sure what I’m missing. I need to set the component to the ‘Fill’ option so that it adjusts to the screen width. The component always sets itself to ‘Fixed,’ and I can’t work with it further. Where am I going wrong? Thank you very much.
These are great tutorials... But one tutorial I haven't seen that would greatly help me and probably a few others. How to effectively navigate the support community and best practices to keep your sites up and running, because let's face facts. No matter how wiz-bang beautiful your site is, it's nothing if it's down because of some Framer bug. But please, carry on
Hey Nandi, thank you for this tutorial, great lesson! For component variables, can we set up different hover states? So for example in your design, if i was to hover on the image for "Cursor image trail" i'd see a different image inside the card - can this be achieved with component variables? Thank you again!!
Hey! Appreciate your kind words. Yes you can definitely achieve that. On the hover state you can remove the variable and add a new one to it or leave it on a fixed value. Hope this helps!
One more thing I would like to ask that is it possible to create an animation on the switching from one page to another from the specific section of home page like CMS collection, and it will gradually cover up the whole of the whole screen of the website or an mobile instead of opening the page on another on another tab let me know if it is possible in the Framer because I have seen so many websites having such animations and this animation just look like amazing
@@framer.universityi think what he trying to say is, Imagine pictures scrolling in a carousel and when you click on one of images instead of opening a new webpage he wants to animate the image and scale it to a bigger size covering the whole screen with the information regarding it on the same page and is also scrollable.
Hey Nandi is it possible to create the pixel distortion effect in Framer on hover, also I wanted to create the fluid scroll (horizontal or vertical whatever you would like) in Framer and when we scroll, stationary frames slightly changes its style (like a rectangle to oval) and whole following frames follow that effect / animation and afters the scroll stops it goes back to its original state and vice versa Please reply 🙂
Hi nandi. I try to recreate a website for my practice but i don't know download or link the same video or images that are in the original website. Please can you help me
If you can’t simply select the part of the text and change the color, then you’ll need to create separate text layers for solid and gradient. Hope this helps:)
For the other commenters, you can't really master Framer until you know how to code. So much is off-limits without knowing how to code, and so much is off-limits even if you know how to code. What a dilemma.
@@framer.university Yeah, you mastered Framer for what it was intended to do, no-code and I can tell you are very proficient with it but imagine how much further you could go with code. There is a whole new world of stuff you can do with code in Framer. It's probably a matter of "you don't know what you're missing until you get there." I can see you know the importance of code as well since you made a video about ChatGPT a while ago. Also, you collaborate with coders to bring free components to the public. Framer treats developers as second-class citizens from how lacking the documentation is and also the code feature set in Framer is like a ghost town. No property controls for code overrides which they could easily add. Buggy code editor. No APIs for anything, unlike Wix Studio(which has APIs for literally everything). Much respect to you though, you carved out a niche for yourself for no-code and I'm all for it. Even developers like myself would rather not touch code if I don't have to.
Yeah definitely there are things you can’t do in Framer, but that’s exactly why I’m releasing components for highly requested features, making them accessible for everyone. Many of the things you’re mentioning are coming, such as property controls for code overrides or APIs. Stay tuned mate 🤝! Framer is gonna be big. They’re not stopping anytime soon. All gas, no brakes.
@@framer.university Yeah you are the Mother Teresa of Framer. Haha. Also I trust you, I know you have insider access to the latest stuff. Property controls for code overrides are finally coming ? That’s going to be lit.
If there’s anything that wasn’t explained clearly in the video, and you still have questions, please leave your feedback in the comments! 💙
I didn't realize events variables could be used like this; it's really cool!
Really like Framer's component facility, much easier to digest that Webflow's classes / combo classes which can get v.complex to manage over a project I imagine!
I agree! Framer makes it so simple and easy to learn for non tech people 👌
Exactly, exactly we need more often videos dear Nandi
how often should I upload?
Kindly make more of these on other elements like frames, transition, etc
More to come! This is just the warmup ;)
you are awesome and inspiring! appreciate
Thank u sooo so much 🫶🫶
Hey Captain, Pure respect and gratitude towards your work, Love from India!
Appreciate you mate! Your support means a lot 🫡
Your voice recording sound quality is great for hearing 👌
Super happy to hear this since I've made some improvements to the recording and post production. Thanks :)
Just started learning framer to create my portfolio. I'm already quite familiar with Figma but it can still get confusing so your videos are perfect!
You can do it mate! Keep learning :) I'm glad my vids help!
I've been trying to understand how to use event variables for so long and I believe this is the first tutorial I've come across that explains how to use them. I would really appreciate to see more examples of how we can use them. Thanks Nandi, you rock! 🙌🤘
Thank you Nandi - calm & informative, as ever.
Thanks mate! :) glad u liked this
Thank You so much for this video
I’m glad it was helpful 💙
Nandi make a tutorial on that dynamic menu component in the beginning of the video!! thats something you should post on youtube cause explaining what components are, is explained by thousands of others framer experts.What you teach and explains in the tutorials of building complex components which can be helpful in websites makes us watch and wait for your new videos!!!!
I might make a tutorial for the dynamic menu. Until then take a look at the remix:
framer.university/resources/dynamic-action-bar-in-framer
You should consider introduce to the page transitions a funtion that can make a transition with a mask (SVG or shapes) this will be amasing
I might make a video on page transitions in the future! thanks for the suggestion 🫶
@@framer.university thanks for the replay, i bougth a package from a guy with transitions but in one of the upgrades in framer stop working, i would like to have any advice for solving this because i dont have any responde from the creador, but again, thanks for the support you are doing grate! ❤️
I actually just started learning framer today (same day this video was published) and needed a good tutorial on components ... right in time!
Hehe great timing! Let me know if something wasn’t explained clearly in the video!
Feedback is super valuable! 🫶
Thank you, Nandi, for how you conducted the event variables, which really inspired me to adapt the feature to create a slide menu. I had some troubles with overlay before I saw your video, Now, I know how to deal with the issue. I'm a big fan of Framer University, and from several of your first tutorials, I learned a lot from you. On again thank you a lot.
Super happy to hear this :) You're very welcome!
I wasn't aware about event thingy, If I knew this few weeks ago, I would've pull off my project sooner. But overall thanks for sharing this.
Glad I could help! :)
Dope video pro. To go back to the ON state you can click at the top where it says interactions and change it from "Off" to "Cycle Variant" saves yu having to link back to it
That’s a nice trick! Never even thought of using it for click interaction. I usually use it for auto looping appear interactions.
Thanks for the tip 🫶
Hi Nandi. Love your style and your pacing is super. Learning lots. Are you using Loom to present?
Your video are amazing thanks !!!
Glad you liked it 🫶
Really love these videos, thanks so much!
Thanks! Im glad u like them :))
Thanks for this. That click event for components was super useful. 🫡
Happy to hear it mate :)
nice tutorial. Great, thank sir
Happy I could help :)
Love framer❤
Framer's good 💙
Good job!
Thanks 🙏
3 times a week, 12 times a month. So that we can master Framer faster.
aye aye, captain!
You're not mastering Framer unless you know how to code. Every other thing needs code to solve.
@@edenassosyes, for now :)
Very well explained!!
Thanks for making the video and sharing these gems with us!
I'd love to know how to do the bento card animations :) like the ones that show the benefits/ features of a product
Thanks!! Have a great day!!
Hey!
Thanks for the kind words!
For a bento anim, you turn each bento box into a compoment and you add a hover state to each, where you change some things about the comp like color, element’s position change and so on.
great Sir
Much appreciated
Great video, thanks for the valuable content.
However, I'm having trouble understanding the notion of event for the overlay. Why isn't event 1 displayed for the overlay and why do we have to create an event chain?
Good question!
Because the event we create is always only visible on one layer back.
So we have a nesting like:
Homepage > Resource Card > Quick Preview Button.
The event created on the Quick Preview Button will be accessible on one “layer of nesting” back, so in Resource Card. There, we can use it for an interaction, or if we decide that we wanna use the event on one layer back (Homepage) we can create another event on it, making a chain of events, pulling it to the outside (Homepage) so we can use it there as trigger for “show on” property of overlay.
Lmk of this explanation makes sense! :)
thanx
Anytime 🫶
Keep going, great masterclass!
thanks so much! i'll keep going 💙
Thank you so much !
You're welcome! 💙
And also the purple glasses in the thumbnail
Hehe.
Component™ glasses merch. 💜
He really said I am gonna bless u
Your videos are top notch. Any ETA for your paid course.
Really appreciate ya!
No ETA yet. Wanna release something special. Needs time!:)
Sorry mate and stay tuned 🤝
Thank you for the great video. I’d like to ask about a problem I’m encountering, and I’m not sure what I’m missing. I need to set the component to the ‘Fill’ option so that it adjusts to the screen width.
The component always sets itself to ‘Fixed,’ and I can’t work with it further. Where am I going wrong?
Thank you very much.
It can only be set to fill if the parent frame is a stack.
These are great tutorials... But one tutorial I haven't seen that would greatly help me and probably a few others.
How to effectively navigate the support community and best practices to keep your sites up and running, because let's face facts. No matter how wiz-bang beautiful your site is, it's nothing if it's down because of some Framer bug.
But please, carry on
I have some videos on best practices:
framer.university/lessons/5-mistakes
Hey Nandi, thank you for this tutorial, great lesson! For component variables, can we set up different hover states? So for example in your design, if i was to hover on the image for "Cursor image trail" i'd see a different image inside the card - can this be achieved with component variables? Thank you again!!
Hey! Appreciate your kind words.
Yes you can definitely achieve that. On the hover state you can remove the variable and add a new one to it or leave it on a fixed value. Hope this helps!
@@framer.university Ah okay, makes sense. Will give it a try, thanks for responding! :)
Thanks!
i hope this video will help 🫶
Omg! It’s niiiiiiiiiiiice ❤
Thank uu 🫡
18:00 Also kindly make a video on transitions
Anything specific you want to know about them?
@@framer.university Spring transformation properties especially damping, mass, stiffness, etc
And also when are you going to make framer university live? and will it be paid or free?
you rock man
🫶🫶
One more thing I would like to ask that is it possible to create an animation on the switching from one page to another from the specific section of home page like CMS collection, and it will gradually cover up the whole of the whole screen of the website or an mobile instead of opening the page on another on another tab let me know if it is possible in the Framer because I have seen so many websites having such animations and this animation just look like amazing
Are you talking about an overlay?
Like the quick preview interaction on framer.university/resources (the button on top right corner of cards)?
@@framer.universityi think what he trying to say is, Imagine pictures scrolling in a carousel and when you click on one of images instead of opening a new webpage he wants to animate the image and scale it to a bigger size covering the whole screen with the information regarding it on the same page and is also scrollable.
Hey Nandi is it possible to create the pixel distortion effect in Framer on hover, also I wanted to create the fluid scroll (horizontal or vertical whatever you would like) in Framer and when we scroll, stationary frames slightly changes its style (like a rectangle to oval) and whole following frames follow that effect / animation and afters the scroll stops it goes back to its original state and vice versa
Please reply 🙂
Can you send an example of what you’re looking to create?
Is there key/gamepad & drag interaction available for interactive components in framer like figma?
Not yet!
How do you copy the styles from hovered and pressed to the next variant?
Unfortunately you can’t do that.
Hi nandi. I try to recreate a website for my practice but i don't know download or link the same video or images that are in the original website. Please can you help me
You can go into inspect mode in the browser and get assets from there.
Google “Getting Website Assets From Inspector”.
G.O.A.T
🫡🙏
but is it possible to change the texts in button instances?
watch the full video hehe 22:35
how to apply both gradient and solid colors to one heading?
If you can’t simply select the part of the text and change the color, then you’ll need to create separate text layers for solid and gradient. Hope this helps:)
how could i join Framer University ?
Wait for the release (next year) and then you can join:) 🤝
Gets confusing when you get the overlay. That part needs more details.
For the other commenters, you can't really master Framer until you know how to code. So much is off-limits without knowing how to code, and so much is off-limits even if you know how to code. What a dilemma.
Well, I don’t know how to code and I think I mastered Framer pretty well lol
@@framer.university Yeah, you mastered Framer for what it was intended to do, no-code and I can tell you are very proficient with it but imagine how much further you could go with code. There is a whole new world of stuff you can do with code in Framer. It's probably a matter of "you don't know what you're missing until you get there." I can see you know the importance of code as well since you made a video about ChatGPT a while ago. Also, you collaborate with coders to bring free components to the public.
Framer treats developers as second-class citizens from how lacking the documentation is and also the code feature set in Framer is like a ghost town. No property controls for code overrides which they could easily add. Buggy code editor. No APIs for anything, unlike Wix Studio(which has APIs for literally everything).
Much respect to you though, you carved out a niche for yourself for no-code and I'm all for it. Even developers like myself would rather not touch code if I don't have to.
Yeah definitely there are things you can’t do in Framer, but that’s exactly why I’m releasing components for highly requested features, making them accessible for everyone.
Many of the things you’re mentioning are coming, such as property controls for code overrides or APIs.
Stay tuned mate 🤝! Framer is gonna be big. They’re not stopping anytime soon.
All gas, no brakes.
@@framer.university Yeah you are the Mother Teresa of Framer. Haha.
Also I trust you, I know you have insider access to the latest stuff. Property controls for code overrides are finally coming ? That’s going to be lit.
🫡🫡
thank you nandi , i just sent you an email back