- Видео 29
- Просмотров 236 149
Design with Asif
Великобритания
Добавлен 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:
ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin
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:
ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin
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/
Просмотров: 367
Видео
The POPULAR Image Trail Effect - Framer & GSAP
Просмотров 496Месяц назад
Remix link: framer.com/projects/new?duplicate=LwRDSN3iPwa8JvZNC1zI Join this channel to get access to the perks: ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin 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
Просмотров 360Месяц назад
Remix link: framer.com/projects/new?duplicate=upQ079wPzGbjA5BaQdd6 Join this channel to get access to the perks: ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin 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
Просмотров 457Месяц назад
Remix link: framer.com/projects/new?duplicate=lwdMPOydZvpphhPVV9sR Join this channel to get access to the perks: ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin 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
Просмотров 9952 месяца назад
Remix link: framer.com/projects/new?duplicate=NnRty4j7aJy29h0ig6ii Join this channel to get access to perks: ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin 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!
Просмотров 4452 месяца назад
Remix link: framer.com/projects/new?duplicate=rMgh6BjKV0Na0nAlqRfi Join this channel to get access to perks: ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin 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
Просмотров 4992 месяца назад
Remix link: framer.com/projects/new?duplicate=xwxb2Fc0QPsaGR22jPje Join this channel to get access to perks: ruclips.net/channel/UCujbStV-Rp-QGfiHOKA9AvAjoin 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
Просмотров 5153 месяца назад
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
Просмотров 7183 месяца назад
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
Просмотров 1,1 тыс.3 месяца назад
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
Просмотров 3 тыс.4 месяца назад
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
Просмотров 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)
Просмотров 4,4 тыс.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...
Framer + GSAP - Amazing Text Reveal Animation
Просмотров 3,1 тыс.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,3 тыс.11 месяцев назад
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
Просмотров 903Год назад
Simplest Yet Elegant Carousel Animation - Figma Prototype Tutorial
Animated Border While Hovering - Figma Prototype Tutorial
Просмотров 3,5 тыс.Год назад
Animated Border While Hovering - Figma Prototype Tutorial
Apple Watch Series 9 Slider - Figma Prototype Tutorial
Просмотров 390Год назад
Apple Watch Series 9 Slider - Figma Prototype Tutorial
Stripe's Interactive Slider Component - Figma Prototype Tutorial
Просмотров 379Год назад
Stripe's Interactive Slider Component - Figma Prototype Tutorial
Stripe's Interactive Card Component - Figma Prototype Tutorial
Просмотров 616Год назад
Stripe's Interactive Card Component - Figma Prototype Tutorial
Data Visualization - Animate Horizontally Scrollable Table in Figma
Просмотров 11 тыс.Год назад
Data Visualization - Animate Horizontally Scrollable Table in Figma
Data Visualization - Design Radar Chart in Figma
Просмотров 1,5 тыс.Год назад
Data Visualization - Design Radar Chart in Figma
Data Visualization - Design Bubble Chart in Figma
Просмотров 553Год назад
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
Просмотров 745Год назад
No more duplicated data - How to use Contento plugin
Glowing Card Effect of Linear - Figma Prototype Tutorial
Просмотров 1,5 тыс.Год назад
Glowing Card Effect of Linear - Figma Prototype Tutorial
Easiest way to generate color palette in Figma
Просмотров 93 тыс.Год назад
Easiest way to generate color palette in Figma
Fastest way to create text styles in Figma
Просмотров 92 тыс.2 года назад
Fastest way to create text styles in Figma
Design custom 3D maps using Figma and Mapbox studio
Просмотров 5 тыс.2 года назад
Design custom 3D maps using Figma and Mapbox studio
ABSOLUTELY GOLDEN
GOLDEN
hi, thank you for your video, how did you make the blue navigation line on your frame 625?
I wish I could like this video a million times. Thanks a lot men. You are the best
Amazing man.
Unfortunately this generator doesn't support re-generation. So all your palettes become stale right after generation. Styles in Figma seem to be useless because of that.
Very nice. Would love an option to count backwards. Or detect if number START is greater than number END, then count backwards. 🙏
How do I make the animation go fade in per word instead of a wipe animation/karaoke style?
Thank you dude, I have been searching all over for a way to connect images to CMS for 2 photography website client projects that I'm working on
Looks awesome! How could I make the width of the image be fill instead of px? Would love for this to me more responsive for how I have things set up. Or is it possible to make this a code overide for an image i already have set up?
Hello Asif, thanks a lot for your free animation.Can you explain me, how is it possible to count down from 2024 to 1979?
Amazing! I'm also a developer and can create amazing animations with framer motion.
thank you
Hey, I used the "Typescale" figma plugin. Now I am not able to create new text boxes for a text. please help me.
New text boxes? Can you please explain?
@@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.
Blue border are not as regular like 1080 × 1080. It is 1080 = 1080
@@aj-lan284 That’s strange! Can you please share your figma file with me at asifkabir008@gmail.com I will take a look.
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 !
Please copy the component and paste in your project. Not the code. The code will come along with the component.
@@DesignwithAsif it worked ! Thank you
@@DesignwithAsif I do have a question, do you know how to setup the animation for each characters instead of word by word ?
@@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.
@@DesignwithAsif That's what I tried to do, but ChatGPT is struggling or maybe my request is not clear enough
cool stuff, thanks for sharing the info! Subbed
Thank you very much ! Please make a video making the slider component
Sure. I will make a video about sliders.
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: ruclips.net/video/nJE-ZDso9TY/видео.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.