- 29
- 221 529
Design with Asif
United Kingdom
Приєднався 20 жов 2011
Let's improve our design skills together and build better products!
Marquee Hover Effect - Recreating k72 Menu in Framer
Remix link: framer.com/projects/new?duplicate=hrXtPfFJyfvmAuyIOkwA
Join this channel to get access to the perks:
ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin
Have any questions? Join the discord to ask discord.gg/5jjxFETsXM
Background music:
pixabay.com/music/beats-slow-trap-18565/
pixabay.com/music/meditationspiritual-relaxing-birds-and-piano-music-137153/
Join this channel to get access to the perks:
ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin
Have any questions? Join the discord to ask discord.gg/5jjxFETsXM
Background music:
pixabay.com/music/beats-slow-trap-18565/
pixabay.com/music/meditationspiritual-relaxing-birds-and-piano-music-137153/
Переглядів: 241
Відео
The POPULAR Image Trail Effect - Framer & GSAP
Переглядів 41021 день тому
Remix link: framer.com/projects/new?duplicate=LwRDSN3iPwa8JvZNC1zI Join this channel to get access to the perks: ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
The OG Text Distortion - WebGL in Framer
Переглядів 23921 день тому
Remix link: framer.com/projects/new?duplicate=upQ079wPzGbjA5BaQdd6 Join this channel to get access to the perks: ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Image Distortion - WebGL in Framer
Переглядів 31421 день тому
Remix link: framer.com/projects/new?duplicate=lwdMPOydZvpphhPVV9sR Join this channel to get access to the perks: ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Creating Next-Level Hover Effect in Framer with Custom Components
Переглядів 543Місяць тому
Remix link: framer.com/projects/new?duplicate=NnRty4j7aJy29h0ig6ii Join this channel to get access to perks: ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Eye-Catching Framer Scroll Animations: Impress Your Audience Instantly!
Переглядів 383Місяць тому
Remix link: framer.com/projects/new?duplicate=rMgh6BjKV0Na0nAlqRfi Join this channel to get access to perks: ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Framer - Number Counter Component (Free) - Gradient Supported
Переглядів 3692 місяці тому
Remix link: framer.com/projects/new?duplicate=xwxb2Fc0QPsaGR22jPje Join this channel to get access to perks: ua-cam.com/channels/ujbStV-Rp-QGfiHOKA9AvA.htmljoin Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Text Reveal Animation - Supports Inline HTML Markup Tags - Framer & Framer Motion
Переглядів 4022 місяці тому
Remix link: framer.com/projects/new?duplicate=AZWp1tYtMdRWsBPOrPZg Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Scramble Text Reveal - Framer & Framer Motion
Переглядів 6533 місяці тому
Remix link: framer.com/projects/new?duplicate=h371ATPXjl1Dbu708Etl Have any questions? Join the discord to ask discord.gg/5jjxFETsXM Background music: pixabay.com/music/beats-slow-trap-18565/
Auto-Close FAQ (Accordion) Component for Framer - Custom Code
Переглядів 8833 місяці тому
Remix: framer.com/projects/new?duplicate=d0NQ3WxFvInSsWVRJeoC Hey there! Just a heads up, I don't have a fancy recording setup; I'm simply using my trusty Mac. Plus, I only use the trackpad to design, so you might hear a little sliding and clicking noise - my apologies for that in advance. But don't worry, despite these quirks, I hope you'll still enjoy the video! If there's any part that doesn...
Image Slider + Framer CMS - How to connect and control
Переглядів 2,1 тис.3 місяці тому
Remix: framer.com/projects/new?duplicate=nB1ZGAjhlPmZb3VAduAH Please check the blog page as the images of the slider are connected to the blog. Hey there! Just a heads up, I don't have a fancy recording setup; I'm simply using my trusty Mac. Plus, I only use the trackpad to design, so you might hear a little sliding and clicking noise - my apologies for that in advance. But don't worry, despite...
The popular stacking card animation in Framer
Переглядів 4,6 тис.4 місяці тому
Hey there! Just a heads up, I don't have a fancy recording setup; I'm simply using my trusty Mac. Plus, I only use the trackpad to design, so you might hear a little sliding and clicking noise - my apologies for that in advance. But don't worry, despite these quirks, I hope you'll still enjoy the video! If there's any part that doesn't quite make sense, feel free to drop a comment below. Fair w...
Framer - Number Counter with Viewport Control - Custom Component (Free)
Переглядів 3,8 тис.6 місяців тому
Hey there! Just a heads up, I don't have a fancy recording setup; I'm simply using my trusty Mac. Plus, I only use the trackpad to design, so you might hear a little sliding and clicking noise - my apologies for that in advance. But don't worry, despite these quirks, I hope you'll still enjoy the video! If there's any part that doesn't quite make sense, feel free to drop a comment below. Fair w...
Framer + GSAP - Amazing Text Reveal Animation
Переглядів 2,7 тис.7 місяців тому
Hey there! Just a heads up, I don't have a fancy recording setup; I'm simply using my trusty Mac. Plus, I only use the trackpad to design, so you might hear a little sliding and clicking noise - my apologies for that in advance. But don't worry, despite these quirks, I hope you'll still enjoy the video! If there's any part that doesn't quite make sense, feel free to drop a comment below. Fair w...
Spotlight Effect Animation in Framer (No Code)
Переглядів 1,2 тис.10 місяців тому
Hey there! Welcome to a new series of Framer. Just a heads up, I don't have a fancy recording setup; I'm simply using my trusty Mac. Plus, I only use the trackpad to design, so you might hear a little sliding and clicking noise - my apologies for that in advance. But don't worry, despite these quirks, I hope you'll still enjoy the video! If there's any part that doesn't quite make sense, feel f...
Simplest Yet Elegant Carousel Animation - Figma Prototype Tutorial
Переглядів 85811 місяців тому
Simplest Yet Elegant Carousel Animation - Figma Prototype Tutorial
Animated Border While Hovering - Figma Prototype Tutorial
Переглядів 3,1 тис.11 місяців тому
Animated Border While Hovering - Figma Prototype Tutorial
Apple Watch Series 9 Slider - Figma Prototype Tutorial
Переглядів 36711 місяців тому
Apple Watch Series 9 Slider - Figma Prototype Tutorial
Stripe's Interactive Slider Component - Figma Prototype Tutorial
Переглядів 36011 місяців тому
Stripe's Interactive Slider Component - Figma Prototype Tutorial
Stripe's Interactive Card Component - Figma Prototype Tutorial
Переглядів 587Рік тому
Stripe's Interactive Card Component - Figma Prototype Tutorial
Data Visualization - Animate Horizontally Scrollable Table in Figma
Переглядів 10 тис.Рік тому
Data Visualization - Animate Horizontally Scrollable Table in Figma
Data Visualization - Design Radar Chart in Figma
Переглядів 1,4 тис.Рік тому
Data Visualization - Design Radar Chart in Figma
Data Visualization - Design Bubble Chart in Figma
Переглядів 525Рік тому
Data Visualization - Design Bubble Chart in Figma
Master Figma Variables: Dynamic Value Manipulation
Переглядів 1,2 тис.Рік тому
Master Figma Variables: Dynamic Value Manipulation
No more duplicated data - How to use Contento plugin
Переглядів 743Рік тому
No more duplicated data - How to use Contento plugin
Glowing Card Effect of Linear - Figma Prototype Tutorial
Переглядів 1,4 тис.Рік тому
Glowing Card Effect of Linear - Figma Prototype Tutorial
Easiest way to generate color palette in Figma
Переглядів 89 тис.Рік тому
Easiest way to generate color palette in Figma
Fastest way to create text styles in Figma
Переглядів 89 тис.2 роки тому
Fastest way to create text styles in Figma
Design custom 3D maps using Figma and Mapbox studio
Переглядів 4,9 тис.2 роки тому
Design custom 3D maps using Figma and Mapbox studio
Thank you very much ! Please make a video making the slider component
Thank you so much!
thank you soooo much. much need component
Thank you i've been looking at shaders and plane transformations and this really helped, maybe you could do a tutorial on performant shaders? :D
What is performant shaders?
So cool, one problem is the size is fixed, how can I make it responsive?
You can control the image height and width, check the property control.
Hi Asif, the remix link contains the scramble component by mistake. Do you have the link to this reveal component? Thanks.
Oops, my bad! I updated the wrong video description. Thanks for pointing it out. 🙏
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
Mine just instant transitions. Don't know how to get that smooth animation
select the primary variant and change the transition from the right side panel.
Cool x10000000000
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! 🙂
Yes possible, create a variant of the card with the blurred effect and use Scroll Variant effect from the side panel.
@@DesignwithAsif Thanks a lot Asif! ☺
I just learned something amazing. Thanks man
How can I use this if I want to have the Text Sticky and to reveal while scrolling down the sticky section?
I will work on that this weekend. I also faced the sticky issue. You will have an update soon.
fixed: framer.com/projects/new?duplicate=h371ATPXjl1Dbu708Etl
Thank you👏
Good video thx
Thanks for this tutorial!!!
great work! tho the component not working if countdown?
wow great. 👍
Hello Asif, how can I use custom fonts? I need to use my uploaded fonts.
I am trying to work on that. I will give an update when that is done.
@@DesignwithAsif Thanks a lot. I tried also with ChatGPT but failed. BTW, I’m waiting for the updates. 😊
Hey love your videos, can you please make a video on removing or customizing browser scrollbar!1
Sure, I will think about it. Cheers!
@@DesignwithAsif Thankx mate
Thank You so much bro. I wish you should have 1 million subscriber within a short period of time. Best of luck.
cool effect thanks for your effort ❤ wondering what programing languages should I learn if I want to know how to understand and adjust code like ?
javascript, then a framework, react.
Awesome tutorial! I was wondering recently how or if I could do that in Framer. Thank you!
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
share a remix file of your project.
bro this is gem 💠 learned a lot!!
Thank You so much brother. ❤
wow this is so cool wondering how you could make it happen especially controlling the effect props like variables ?
I am glad that you liked it. I always provide the code. Every line of code is available via the Edit Code button.
@@DesignwithAsif big thanks mann❤❤❤❤ maybe you can demonstrate how to mix framer with code like gsap or WebGL ,no one made it before it
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.
@@DesignwithAsif u r the besttttt
Thanks!!
this feels illegal seriously🥲...thankyou so much for this
Best teacher ❤❤❤
You are best! thank you :)
Great tutorial! You explain so well that even complex animation looks simple. Thank you so much and please keep posting
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?
Can you explain it more please?
@@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
framer.com/projects/new?duplicate=9LkFH5X1SinY2w5Pva8T
@@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
@@ahmednawaz4723 I just made that for you. Go to the remix file, edit that. You have everything there to edit. Check that.
Thank you so much :) You're Legend. Much needed component. ✌
Get the latest version of the counter component from here: ua-cam.com/video/nJE-ZDso9TY/v-deo.html
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
Apreciate it. Well, those images were taken from the internet. The UIs are created by an agency named Musemind. I just took their images from dribble.
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?
every stacking card animation available in Swag is possible to recreate using Framer.
So comprehensive! Thank you so much!
Helpful video!
Thanks for the great explanation! It really helped me finally understand/visualize what i wanted to do!
Thanks for the idea Rory.
good tutorial, how will it be on mobile
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.
really helpfull honestly I think this video is the best about framer overlapping cards on UA-cam
how add delay? thanks!
Increase the duration
legend asif thank you. using on my new site today
has the prefix and suffix too !
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 :)
Hi Asif, thanks for this vid wa super helpful. Could you do also a video where you show how to build the slider component?
How can you get this code? kindly make a video to generate the GSAP code.
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.
is there an AI to do it? Wow, amazing!
<3
Version 2 is more powerful with Gradient support, Increment type support and etc. Check this out: ua-cam.com/video/nJE-ZDso9TY/v-deo.html
legend asif cheers
You Sir, you are a legend
Top notch stuff
KEEP IT UPPP!!! So great work Bro
Appreciate it!!