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

Поделиться
HTML-код
  • Опубликовано: 2 окт 2024

Комментарии • 65

  • @peelagowtham7928
    @peelagowtham7928 Год назад +4

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

  • @nailakhalid956
    @nailakhalid956 Год назад +8

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

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

    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

  • @Victor-do8xt
    @Victor-do8xt 4 дня назад

    Is it possible to import this final product into Wordpress Elementor?

  • @lilu3647
    @lilu3647 Год назад +4

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

    • @AsimanISMAYILZADA
      @AsimanISMAYILZADA Год назад +2

      Same problem, anyone can help?

    • @DesignByHsn
      @DesignByHsn  11 месяцев назад +1

      Download the Figma file from Gumroad it's free

  • @rajaiswarya1285
    @rajaiswarya1285 Год назад +5

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

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

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

  • @adedoyinmary7480
    @adedoyinmary7480 2 года назад +1

    Hi great job,how did u get your image

    • @DesignByHsn
      @DesignByHsn  2 года назад +1

      I downloaded all the images from unsplash.com

  • @ngocquan7201
    @ngocquan7201 Год назад +3

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

  • @ritikagupta4382
    @ritikagupta4382 2 месяца назад

    How the even auto scroll animation is possible in figma?

  • @jeremyfultineer7
    @jeremyfultineer7 10 месяцев назад +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.

  • @Aishabashir-u3k
    @Aishabashir-u3k 11 месяцев назад +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 ?

    • @DesignByHsn
      @DesignByHsn  6 месяцев назад

      Repeat same step for all pages

  • @daniellegathings7651
    @daniellegathings7651 Год назад

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

  • @sakshipithwa5799
    @sakshipithwa5799 7 месяцев назад

    from where did you get the clouds

  • @ikaay4976
    @ikaay4976 Год назад

    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  Год назад

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

  • @menekamrudy5861
    @menekamrudy5861 Год назад +1

    Thank you for this tutorial

  • @tsaie5373
    @tsaie5373 4 месяца назад

    figma file isn't work.

    • @DesignByHsn
      @DesignByHsn  4 месяца назад

      Download and drop the file in Figma homepage

    • @tsaie5373
      @tsaie5373 4 месяца назад

      @@DesignByHsn I did this.Thanks!

  • @cristianlyall9185
    @cristianlyall9185 Год назад

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

  • @feefoo564
    @feefoo564 6 месяцев назад

    So much working behind such a simple design

  • @pukkajugaad9540
    @pukkajugaad9540 Год назад

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

  • @Kevin-up3pb
    @Kevin-up3pb 7 месяцев назад

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

  • @ayanghosh3096
    @ayanghosh3096 Год назад

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

    • @DesignByHsn
      @DesignByHsn  Год назад

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

  • @XLD689
    @XLD689 Год назад

    Pls more videos about prototype broo

  • @kossya1081
    @kossya1081 Год назад

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

    • @DesignByHsn
      @DesignByHsn  Год назад

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

    • @kossya1081
      @kossya1081 Год назад

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

  • @aquiyahdesigns
    @aquiyahdesigns Год назад

    This is nicely done

  • @nfsz9832
    @nfsz9832 Год назад

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

    • @DesignByHsn
      @DesignByHsn  11 месяцев назад

      Download the file from gumroad

  • @LoftGraphics
    @LoftGraphics Год назад

    nice

  • @trinachira8300
    @trinachira8300 9 месяцев назад

    Can u show this in mobile version?

    • @DesignByHsn
      @DesignByHsn  9 месяцев назад

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

  • @isnanae3368
    @isnanae3368 Год назад

    thank youuu

  • @berbesmikeljireh3900
    @berbesmikeljireh3900 Год назад

    mine does not scroll, please help

  • @frvnca
    @frvnca 9 месяцев назад

    where did you get the pngs?

  • @AshishhRajj
    @AshishhRajj Год назад

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

  • @keritogr4221
    @keritogr4221 2 года назад +2

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

  • @brunoescoto9630
    @brunoescoto9630 Год назад +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  Год назад +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 Год назад

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

  • @masoudmostafaei1077
    @masoudmostafaei1077 Год назад

    you wrote files are free but its not :)

  • @dimensionaliquid8024
    @dimensionaliquid8024 10 месяцев назад

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

    • @DesignByHsn
      @DesignByHsn  10 месяцев назад

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

    • @dimensionaliquid8024
      @dimensionaliquid8024 10 месяцев назад

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