Design with Asif
Design with Asif
  • Видео 29
  • Просмотров 236 149
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/
Просмотров: 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

Комментарии

  • @sebmandal
    @sebmandal 2 дня назад

    ABSOLUTELY GOLDEN

  • @sebmandal
    @sebmandal 2 дня назад

    GOLDEN

  • @coreachua8893
    @coreachua8893 2 дня назад

    hi, thank you for your video, how did you make the blue navigation line on your frame 625?

  • @billrussells2521
    @billrussells2521 2 дня назад

    I wish I could like this video a million times. Thanks a lot men. You are the best

  • @AudinRushow
    @AudinRushow 4 дня назад

    Amazing man.

  • @ArtiomNeganov
    @ArtiomNeganov 5 дней назад

    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.

  • @kaigradert
    @kaigradert 9 дней назад

    Very nice. Would love an option to count backwards. Or detect if number START is greater than number END, then count backwards. 🙏

  • @jonardtirol4798
    @jonardtirol4798 10 дней назад

    How do I make the animation go fade in per word instead of a wipe animation/karaoke style?

  • @michaelsmilas2220
    @michaelsmilas2220 14 дней назад

    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

  • @dpth
    @dpth 15 дней назад

    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?

  • @MelanieMadaus
    @MelanieMadaus 16 дней назад

    Hello Asif, thanks a lot for your free animation.Can you explain me, how is it possible to count down from 2024 to 1979?

  • @sohrabkhan101
    @sohrabkhan101 19 дней назад

    Amazing! I'm also a developer and can create amazing animations with framer motion.

  • @Antyo_Stark
    @Antyo_Stark 19 дней назад

    thank you

  • @aj-lan284
    @aj-lan284 22 дня назад

    Hey, I used the "Typescale" figma plugin. Now I am not able to create new text boxes for a text. please help me.

    • @DesignwithAsif
      @DesignwithAsif 22 дня назад

      New text boxes? Can you please explain?

    • @aj-lan284
      @aj-lan284 22 дня назад

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

    • @aj-lan284
      @aj-lan284 22 дня назад

      Blue border are not as regular like 1080 × 1080. It is 1080 = 1080

    • @DesignwithAsif
      @DesignwithAsif 22 дня назад

      @@aj-lan284 That’s strange! Can you please share your figma file with me at asifkabir008@gmail.com I will take a look.

  • @madebykapil
    @madebykapil 23 дня назад

    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.

    • @DesignwithAsif
      @DesignwithAsif 22 дня назад

      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.

  • @Omzing
    @Omzing 23 дня назад

    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 !

    • @DesignwithAsif
      @DesignwithAsif 22 дня назад

      Please copy the component and paste in your project. Not the code. The code will come along with the component.

    • @Omzing
      @Omzing 22 дня назад

      @@DesignwithAsif it worked ! Thank you

    • @Omzing
      @Omzing 22 дня назад

      @@DesignwithAsif I do have a question, do you know how to setup the animation for each characters instead of word by word ?

    • @DesignwithAsif
      @DesignwithAsif 22 дня назад

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

    • @Omzing
      @Omzing 22 дня назад

      @@DesignwithAsif That's what I tried to do, but ChatGPT is struggling or maybe my request is not clear enough

  • @DoubleGee_1
    @DoubleGee_1 23 дня назад

    cool stuff, thanks for sharing the info! Subbed

  • @d0v3k11
    @d0v3k11 25 дней назад

    Thank you very much ! Please make a video making the slider component

    • @DesignwithAsif
      @DesignwithAsif 22 дня назад

      Sure. I will make a video about sliders.

  • @tameraatu3848
    @tameraatu3848 26 дней назад

    Thank you so much!

  • @Maryah-fx9fl
    @Maryah-fx9fl 27 дней назад

    thank you soooo much. much need component

  • @mr_topsy
    @mr_topsy 28 дней назад

    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

  • @anhphan7855
    @anhphan7855 28 дней назад

    So cool, one problem is the size is fixed, how can I make it responsive?

    • @DesignwithAsif
      @DesignwithAsif 28 дней назад

      You can control the image height and width, check the property control.

  • @BrandonHampton-z9k
    @BrandonHampton-z9k 29 дней назад

    Hi Asif, the remix link contains the scramble component by mistake. Do you have the link to this reveal component? Thanks.

    • @DesignwithAsif
      @DesignwithAsif 29 дней назад

      Oops, my bad! I updated the wrong video description. Thanks for pointing it out. 🙏

    • @DesignwithAsif
      @DesignwithAsif 29 дней назад

      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

  • @realeboha3
    @realeboha3 29 дней назад

    Mine just instant transitions. Don't know how to get that smooth animation

    • @DesignwithAsif
      @DesignwithAsif 27 дней назад

      select the primary variant and change the transition from the right side panel.

  • @shakes8653
    @shakes8653 Месяц назад

    Cool x10000000000

  • @alinabolgova7503
    @alinabolgova7503 Месяц назад

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

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      Yes possible, create a variant of the card with the blurred effect and use Scroll Variant effect from the side panel.

    • @alinabolgova7503
      @alinabolgova7503 Месяц назад

      @@DesignwithAsif Thanks a lot Asif! ☺

  • @ibrahim__writes
    @ibrahim__writes Месяц назад

    I just learned something amazing. Thanks man

  • @PatrickIzoita
    @PatrickIzoita Месяц назад

    How can I use this if I want to have the Text Sticky and to reveal while scrolling down the sticky section?

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      I will work on that this weekend. I also faced the sticky issue. You will have an update soon.

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      fixed: framer.com/projects/new?duplicate=h371ATPXjl1Dbu708Etl

  • @andronova_videos
    @andronova_videos Месяц назад

    Thank you👏

  • @marcus3995
    @marcus3995 Месяц назад

    Good video thx

  • @ojgo2023
    @ojgo2023 Месяц назад

    Thanks for this tutorial!!!

  • @SharieIngente
    @SharieIngente Месяц назад

    great work! tho the component not working if countdown?

  • @SnowyAtiq
    @SnowyAtiq Месяц назад

    wow great. 👍

  • @SnowyAtiq
    @SnowyAtiq Месяц назад

    Hello Asif, how can I use custom fonts? I need to use my uploaded fonts.

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      I am trying to work on that. I will give an update when that is done.

    • @SnowyAtiq
      @SnowyAtiq Месяц назад

      @@DesignwithAsif Thanks a lot. I tried also with ChatGPT but failed. BTW, I’m waiting for the updates. 😊

  • @DrNikhilRavi
    @DrNikhilRavi Месяц назад

    Hey love your videos, can you please make a video on removing or customizing browser scrollbar!1

  • @SnowyAtiq
    @SnowyAtiq Месяц назад

    Thank You so much bro. I wish you should have 1 million subscriber within a short period of time. Best of luck.

  • @uxdeya7660
    @uxdeya7660 Месяц назад

    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 ?

  • @roryviner263
    @roryviner263 Месяц назад

    Awesome tutorial! I was wondering recently how or if I could do that in Framer. Thank you!

  • @logapriya3262
    @logapriya3262 Месяц назад

    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

  • @luxlu3690
    @luxlu3690 Месяц назад

    bro this is gem 💠 learned a lot!!

  • @SnowyAtiq
    @SnowyAtiq Месяц назад

    Thank You so much brother. ❤

  • @uxdeya7660
    @uxdeya7660 Месяц назад

    wow this is so cool wondering how you could make it happen especially controlling the effect props like variables ?

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      I am glad that you liked it. I always provide the code. Every line of code is available via the Edit Code button.

    • @uxdeya7660
      @uxdeya7660 Месяц назад

      @@DesignwithAsif big thanks mann❤❤❤❤ maybe you can demonstrate how to mix framer with code like gsap or WebGL ,no one made it before it

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      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.

    • @uxdeya7660
      @uxdeya7660 Месяц назад

      @@DesignwithAsif u r the besttttt

  • @kevenasley4171
    @kevenasley4171 Месяц назад

    Thanks!!

  • @khadijakhan-u7t
    @khadijakhan-u7t Месяц назад

    this feels illegal seriously🥲...thankyou so much for this

  • @chin2826
    @chin2826 Месяц назад

    Best teacher ❤❤❤

  • @Cemzdgan
    @Cemzdgan Месяц назад

    You are best! thank you :)

  • @ReservedRealm
    @ReservedRealm Месяц назад

    Great tutorial! You explain so well that even complex animation looks simple. Thank you so much and please keep posting

  • @ahmednawaz4723
    @ahmednawaz4723 Месяц назад

    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
      @DesignwithAsif Месяц назад

      Can you explain it more please?

    • @ahmednawaz4723
      @ahmednawaz4723 Месяц назад

      @@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
      @DesignwithAsif Месяц назад

      framer.com/projects/new?duplicate=9LkFH5X1SinY2w5Pva8T

    • @ahmednawaz4723
      @ahmednawaz4723 Месяц назад

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

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      @@ahmednawaz4723 I just made that for you. Go to the remix file, edit that. You have everything there to edit. Check that.

  • @VivekKumarSahu1
    @VivekKumarSahu1 Месяц назад

    Thank you so much :) You're Legend. Much needed component. ✌

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      Get the latest version of the counter component from here: ruclips.net/video/nJE-ZDso9TY/видео.html

  • @thevisuallaboratory
    @thevisuallaboratory Месяц назад

    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

    • @DesignwithAsif
      @DesignwithAsif Месяц назад

      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.