Parallax Effect in Figma - Animation Tutorial for Website Design (2024)

Sdílet
Vložit
  • čas přidán 11. 09. 2024

Komentáře • 64

  • @tugcehendem348
    @tugcehendem348 Před 8 dny

    It's such a useful video. I downloaded your file and created it my own way. Thanks a billion!

  • @rajaiswarya1285
    @rajaiswarya1285 Před rokem +5

    Too good am learning from ur video 1 class for a day .Thank you

  • @nailakhalid956
    @nailakhalid956 Před rokem +7

    It would be great if mentioned keys you used while taking the elements outside the frame

  • @feefoo564
    @feefoo564 Před 5 měsíci

    So much working behind such a simple design

  • @ngocquan7201
    @ngocquan7201 Před rokem +3

    This is so beautiful! Thank you so much, Hsn!

  • @peelagowtham7928
    @peelagowtham7928 Před rokem +4

    It was really cool animation! Please do videos even more detail in next videos

  • @keritogr4221
    @keritogr4221 Před 2 lety +2

    I just wonder how people don't know this amazing chanel !! Tnx alot that's very useful💖 keep going 💪

  • @menekamrudy5861
    @menekamrudy5861 Před rokem +1

    Thank you for this tutorial

  • @jeremyfultineer7
    @jeremyfultineer7 Před 9 měsíci +1

    I bought the prototype, I was hoping there was a little bit of explanation included to go over what methods are being used. But now I'm just trying to understand the process of how you're making it work. Also, when I try to demo the prototype, none of the interactions work like they do in the video. I tried scrolling, I also click click and dragging but the only movement that is successful on the presentation is the intro where the clouds move in.

  • @aquiyahdesigns
    @aquiyahdesigns Před rokem

    This is nicely done

  • @lilu3647
    @lilu3647 Před rokem +4

    I cant understand how it scrolls to next page, my animation ends at the main page. It seems like one step missing.

  • @isnanae3368
    @isnanae3368 Před rokem

    thank youuu

  • @ritikagupta4382
    @ritikagupta4382 Před měsícem

    How the even auto scroll animation is possible in figma?

  • @user-fz6ug1qv7r
    @user-fz6ug1qv7r Před 11 měsíci +1

    amazing ..but there a issue .third scrollig page per b yhi same method hai kya ? mera just 2 pages tk shi hora jaisay ap ne kiya agay further pages ni horay.. kya agay further pages ka b yhi method hai ?

  • @XLD689
    @XLD689 Před rokem

    Pls more videos about prototype broo

  • @user-em6ws6oj1p
    @user-em6ws6oj1p Před 11 měsíci

    nice

  • @payalkirankatariya9881
    @payalkirankatariya9881 Před 17 hodinami

    That is not swiss that norway Glacier was trying to do everything by my own but then while i was trying to find the pic I suddenly realized

  • @adedoyinmary7480
    @adedoyinmary7480 Před 2 lety +1

    Hi great job,how did u get your image

    • @DesignByHsn
      @DesignByHsn  Před 2 lety +1

      I downloaded all the images from unsplash.com

  • @ikaay4976
    @ikaay4976 Před rokem

    Hey man I need help mine isn’t scrolling I have to click on the arrow key at the bottom of the preview before it moves idk what to do

    • @DesignByHsn
      @DesignByHsn  Před rokem

      Download the figma file (link is in description). Try to match both designs. And make sure the layers name is same on both frames

  • @AshishhRajj
    @AshishhRajj Před rokem

    bro which software did you use for the last clip to record your prototype?

  • @daniellegathings7651
    @daniellegathings7651 Před rokem

    Can this design be applied to videos for social platforms, Instagram, websites, youtube etc ?

  • @brunoescoto9630
    @brunoescoto9630 Před rokem +1

    i have a serious question and I hope you can answer it. if you do this animations on Figma how do you take them to an actual website? If Figma does not export to HTML or JAVA, how does it benefit to have these kind of animations if you can´t export them to an actual website?

    • @DesignByHsn
      @DesignByHsn  Před rokem +1

      The main use of figma is to make Prototype so we can understand the site structure how the site will look. It's easier to make changes in figma than HTML/CSS. You can also export your figma design to HTML via ANIMA plugin.

    • @BUNNYBOSSCRYPTO
      @BUNNYBOSSCRYPTO Před rokem

      This is a peace of cake with jsap just search jsap animation

  • @sakshipithwa5799
    @sakshipithwa5799 Před 6 měsíci

    from where did you get the clouds

  • @ayanghosh3096
    @ayanghosh3096 Před rokem

    How to get those cloud 🙄 ?
    You cannot Download only cloud like that from unsplash ...
    Please answer

    • @DesignByHsn
      @DesignByHsn  Před rokem

      All of the assets are included in a figma file
      Link is in the description

  • @kossya1081
    @kossya1081 Před rokem

    Good day man. After downloading the figma file, it couldn't open on my phone. Please what could be the problem?

    • @DesignByHsn
      @DesignByHsn  Před rokem

      Figma file will only work in figma app or website
      Open figma on your pc and drop the file in homepage

    • @kossya1081
      @kossya1081 Před rokem

      @@DesignByHsn I made a mistake. I meant it couldn't open on my PC. After i downloaded. I had issues with opening the file.

  • @nfsz9832
    @nfsz9832 Před rokem

    I want to check out but it's an error, the process continues

  • @berbesmikeljireh3900
    @berbesmikeljireh3900 Před rokem

    mine does not scroll, please help

  • @trinachira8300
    @trinachira8300 Před 8 měsíci

    Can u show this in mobile version?

    • @DesignByHsn
      @DesignByHsn  Před 8 měsíci

      You can book a class for personalized learning
      Here is my email: hussainsidhu02@gmail.com

  • @frvnca
    @frvnca Před 8 měsíci

    where did you get the pngs?

  • @pukkajugaad9540
    @pukkajugaad9540 Před rokem

    Gumroad is not charging any money from the card so the purchase is not going through :(

  • @cristianlyall9185
    @cristianlyall9185 Před rokem

    Nose si alguien a intentado hacerlo, pero realmente no me funciona.

  • @tsaie5373
    @tsaie5373 Před 3 měsíci

    figma file isn't work.

    • @DesignByHsn
      @DesignByHsn  Před 3 měsíci

      Download and drop the file in Figma homepage

    • @tsaie5373
      @tsaie5373 Před 3 měsíci

      @@DesignByHsn I did this.Thanks!

  • @masoudmostafaei1077
    @masoudmostafaei1077 Před 11 měsíci

    you wrote files are free but its not :)

  • @Kevin-up3pb
    @Kevin-up3pb Před 6 měsíci

    woi anj, bikin yg versi gratisnya lh cok, gaada duit buat langganan gw ppk

  • @dimensionaliquid8024
    @dimensionaliquid8024 Před 10 měsíci

    You need to do a better job explaining how this works. Not a good video.

    • @DesignByHsn
      @DesignByHsn  Před 9 měsíci

      I will try to make it simpler in my next video. Thanks for your feedback.

    • @dimensionaliquid8024
      @dimensionaliquid8024 Před 9 měsíci

      @@DesignByHsn when is your next video? Go more into depth on parallax scrolling, and scrolling in general.