Design with Asif
Design with Asif
  • 29
  • 221 529
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/
Переглядів: 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

КОМЕНТАРІ

  • @d0v3k11
    @d0v3k11 12 годин тому

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

  • @tameraatu3848
    @tameraatu3848 День тому

    Thank you so much!

  • @Maryah-fx9fl
    @Maryah-fx9fl 3 дні тому

    thank you soooo much. much need component

  • @mr_topsy
    @mr_topsy 3 дні тому

    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 4 дні тому

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

    • @DesignwithAsif
      @DesignwithAsif 4 дні тому

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

  • @BrandonHampton-z9k
    @BrandonHampton-z9k 5 днів тому

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

    • @DesignwithAsif
      @DesignwithAsif 5 днів тому

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

    • @DesignwithAsif
      @DesignwithAsif 5 днів тому

      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 5 днів тому

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

    • @DesignwithAsif
      @DesignwithAsif 3 дні тому

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

  • @shakes8653
    @shakes8653 6 днів тому

    Cool x10000000000

  • @alinabolgova7503
    @alinabolgova7503 8 днів тому

    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 7 днів тому

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

    • @alinabolgova7503
      @alinabolgova7503 7 днів тому

      @@DesignwithAsif Thanks a lot Asif! ☺

  • @ibrahim__writes
    @ibrahim__writes 11 днів тому

    I just learned something amazing. Thanks man

  • @PatrickIzoita
    @PatrickIzoita 11 днів тому

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

    • @DesignwithAsif
      @DesignwithAsif 11 днів тому

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

    • @DesignwithAsif
      @DesignwithAsif 10 днів тому

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

  • @andronova_videos
    @andronova_videos 13 днів тому

    Thank you👏

  • @marcus3995
    @marcus3995 13 днів тому

    Good video thx

  • @uiosvaldo
    @uiosvaldo 15 днів тому

    Thanks for this tutorial!!!

  • @SharieIngente
    @SharieIngente 15 днів тому

    great work! tho the component not working if countdown?

  • @SnowyAtiq
    @SnowyAtiq 15 днів тому

    wow great. 👍

  • @SnowyAtiq
    @SnowyAtiq 15 днів тому

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

    • @DesignwithAsif
      @DesignwithAsif 15 днів тому

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

    • @SnowyAtiq
      @SnowyAtiq 15 днів тому

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

  • @DrNikhilRavi
    @DrNikhilRavi 16 днів тому

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

  • @SnowyAtiq
    @SnowyAtiq 18 днів тому

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

  • @uxdeya7660
    @uxdeya7660 19 днів тому

    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 20 днів тому

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

  • @logapriya3262
    @logapriya3262 21 день тому

    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 21 день тому

    bro this is gem 💠 learned a lot!!

  • @SnowyAtiq
    @SnowyAtiq 22 дні тому

    Thank You so much brother. ❤

  • @uxdeya7660
    @uxdeya7660 23 дні тому

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

    • @DesignwithAsif
      @DesignwithAsif 23 дні тому

      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 23 дні тому

      @@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 23 дні тому

      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 19 днів тому

      @@DesignwithAsif u r the besttttt

  • @kevenasley4171
    @kevenasley4171 25 днів тому

    Thanks!!

  • @khadijakhan-u7t
    @khadijakhan-u7t Місяць тому

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

  • @chin2826
    @chin2826 Місяць тому

    Best teacher ❤❤❤

  • @cemozdogan4831
    @cemozdogan4831 Місяць тому

    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: ua-cam.com/video/nJE-ZDso9TY/v-deo.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.

  • @frankvasquez4827
    @frankvasquez4827 Місяць тому

    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?

    • @DesignwithAsif
      @DesignwithAsif Місяць тому

      every stacking card animation available in Swag is possible to recreate using Framer.

  • @neddieperez46
    @neddieperez46 Місяць тому

    So comprehensive! Thank you so much!

  • @richasrivastava7887
    @richasrivastava7887 Місяць тому

    Helpful video!

  • @roryviner263
    @roryviner263 Місяць тому

    Thanks for the great explanation! It really helped me finally understand/visualize what i wanted to do!

  • @bonachidera
    @bonachidera Місяць тому

    good tutorial, how will it be on mobile

    • @DesignwithAsif
      @DesignwithAsif Місяць тому

      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.

  • @vitaliy7280
    @vitaliy7280 Місяць тому

    really helpfull honestly I think this video is the best about framer overlapping cards on UA-cam

  • @MartieloMG
    @MartieloMG Місяць тому

    how add delay? thanks!

  • @HarrisonBolton-k8c
    @HarrisonBolton-k8c Місяць тому

    legend asif thank you. using on my new site today

  • @binodtamang9622
    @binodtamang9622 Місяць тому

    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 :)

  • @lukasdiesen2408
    @lukasdiesen2408 Місяць тому

    Hi Asif, thanks for this vid wa super helpful. Could you do also a video where you show how to build the slider component?

  • @tanvirhasan1616
    @tanvirhasan1616 Місяць тому

    How can you get this code? kindly make a video to generate the GSAP code.

    • @DesignwithAsif
      @DesignwithAsif Місяць тому

      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.

  • @Fullstackdesigners
    @Fullstackdesigners Місяць тому

    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.

    • @DesignwithAsif
      @DesignwithAsif Місяць тому

      is there an AI to do it? Wow, amazing!

  • @arjunmakwana-ir6rp
    @arjunmakwana-ir6rp Місяць тому

    <3

  • @DesignwithAsif
    @DesignwithAsif Місяць тому

    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

  • @jerzyzareba551
    @jerzyzareba551 Місяць тому

    You Sir, you are a legend

  • @bishalsaha1434
    @bishalsaha1434 Місяць тому

    Top notch stuff

  • @amanos7056
    @amanos7056 2 місяці тому

    KEEP IT UPPP!!! So great work Bro