@@DesignwithAsif lets say I copied text passage from figma page1 and paste that into figma page 2. Now I will double click on passage to edit it but it is not responding. I mean I am not able to edit it. I checked left panel but I did not locked it.
Hi Asif, Video is great! I checked remix file and that is empty, also other thing for big pictures, in stack how did you select multiple picture. In one stack there are 4 pictures but showing only one picture.
Check the blog page please. This tutorial was made for CMS. Answering the 2nd query: Put multiple pictures side by side. Select all. Covert them into a stack (opt+cmd+return), select the stack and convert that to a frame (cmd+return), now minimize the width and make the 'Overflow' (right side panel)- hidden.
Hi ! I am new to Framer so I do not know how to handle this very well. When using your remix link and copy/pasting your code inside my website, when I select my text and go to code overrides I can't find the .tsx file I have just created. It keeps creating an "example.tsx"file. Any Idea why ? Thanks again for sharing !
@@Omzing copy my code and ask chatgpt to make the animation character by character. Then replace my code with gpt’s code. Use FramerGPT inside chatgpt.
I have updated the remix link. But I saw the reveal is not so good. You can try this one, it is using GSAP but it does not have the html mark up tags. But still you can create multilines by duplication it several times. framer.com/projects/new?duplicate=Y1VCp1o5Ai8oH71XInLy
Love this tutorial, thanks a lot for sharing 😍! One question, is it possible to create a blurred effect when the cards disappears in the background? Where should I look for it? Thanks again! 🙂
I followed the same steps and it looks great on web version. However it shows a lot of white space between each images in a frame. Could you please help me to fix this. Thanks in advance
This is using webGL, specifically OGL from webGL. And i have made a video previously about using GSAP to create a text reveal animation. That is in my channel.
Hi Asif I am trying to make a counter component that changes based on a slider control. Is that something possible using this component. If not, can it be achieved in framer with custom code?
@@DesignwithAsif Imagine a volume slider which shows the count of volume when the slider is dragged. An addition to it would be adding multiple counters with different start&end ranges triggering from the same slider
@@DesignwithAsif This is exactly what i was talking about. Can you make a component in a way where I can start and end range to the counter and it would change based on slider. And then option to add as many counter linked to the same slider with different ranges for each. That would be suuuuper helpful. TIA
Absolutely awesome. Just added this to my portfolio. Quick question - what plataform do you use to make your mockups? The images you used are super beautiful
Awesome tutorial! Thank you! But, it is possible to still have some edges of the sections below visible to have a "stacked cards" effect? Similar to the Swag website?
you need to create a variant for the mobile using lower text sizes and you can use click event on the primary variant to the variant with image and use that as a dummy variant with after delay event to go to the specific page, because there's no hover for the mobile screens.
I have been using Figma for a few years now and never had the need to set up my own style as they had already been built by the bigger design systems teams. Looking to build my own websites in the near future and this is the perfect tutorial to get me started. Thank you :)
Appreciate your comment. Although my channel is focused on design, I will think about that in the future. How do I get the code? I write, take help from the internet, just like what others do.
00:02 Creating Auto-Close FAQ Component in Framer 01:16 Creating a versatile auto-close FAQ component. 02:38 Customize fonts, colors, and backgrounds for questions and answers 03:52 Customize icon and alignment in Auto-Close FAQ component 05:07 Adjust margin and padding for FAQ components 06:27 Customize gap, radius, and border color for accordion component. 07:44 Utilize markup language in answer sections for styling 08:54 Customize auto-close FAQ component easily Crafted by Merlin AI.
