Pixxelex
Pixxelex
  • 147
  • 806 991
Create PARALLAX IMAGE SLIDER Animation Using Figma | FIgma Tutorial
In this video, we will learn how to create a unique parallax image slider animation using Figma. If you found this video helpful, please remember to like, comment, and share.
Check Out Previous Videos
Interactive Video Hover: ua-cam.com/video/r2Ff76AGrtc/v-deo.html
Advanced Card Animation: ua-cam.com/video/-CallQaRgYk/v-deo.html
Advanced Image Slider: ua-cam.com/video/cPSU3CbH5qE/v-deo.html
UI Design Challenges: ua-cam.com/play/PLBblYKb7F1vr3b_N8ZuagaJDAaq1zWrfa.html&si=vYKY0eAWmHI9H4kn
UI Design Resouces: ua-cam.com/play/PLBblYKb7F1vpVughMvteE5FP4PSot0sq7.html
Figma Animation Tutorial Playlist: ua-cam.com/play/PLBblYKb7F1vpEIYsbTdzTUO3EbMkWOWuc.html
Переглядів: 2 012

Відео

Create AMAZING Interactive Button Animation Using Figma | Figma Tutorial
Переглядів 1 тис.14 днів тому
In this video, I tried to show you how to create an interactive button hover animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Auto Scrolling Text: ua-cam.com/video/QYkdzTGy7uc/v-deo.html Bouncing Ball Animation: ua-cam.com/video/3m0NHZz7ncI/v-deo.html Floating Button Animation: ua-cam.com/video/Aa5QVUHX5J4/v-de...
Create HORIZONTAL PARALLAX EFFECT Animation In Figma | Figma Tutorial
Переглядів 2,1 тис.14 днів тому
In this video, I tried to show you how to create a horizontal parallax animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Advanced Image Slider: ua-cam.com/video/D2FZkt7EXnw/v-deo.html Endless Card Carousel: ua-cam.com/video/P5qEU73IPr8/v-deo.html Sticky Sidebar On Scroll: ua-cam.com/video/4kTjNGrl9yM/v-deo.html ...
Create INTERACTIVE Video Hover Animation In Figma | Figma Tutorial
Переглядів 2,4 тис.21 день тому
In this video, I tried to show you how to create an interactive video hover animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Modern Slider Animation: ua-cam.com/video/cPSU3CbH5qE/v-deo.html Card Swiping Animation: ua-cam.com/video/G2Ri1aV6ky8/v-deo.html Sticky Sidebar On Scrolling: ua-cam.com/video/4kTjNGrl9yM/...
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 2,8 тис.Місяць тому
In this video, I tried to show you how to create an advanced image slider animation, which is likely a swipe animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Interactive Hover Animation: ua-cam.com/video/nk7Bw38qoZw/v-deo.html Endless Spinning Animation: ua-cam.com/video/An9IqPnqu2c/v-deo.html Refracted Glass E...
How To Create CURVED Carousel With Endless Auto Scrolling In Figma | Figma Tutorial
Переглядів 3 тис.Місяць тому
In this video, I tried to show you how to create an endless scrolling animation with curved carousels using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-deo.html Image Slider Animation: ua-cam.com/video/ygguk1mbdkQ/v-deo.html Parallax Scroll Animation: ua-cam.com/v...
Create INTERACTIVE Image SLIDER Animation In Figma | Figma Tutorial
Переглядів 3,2 тис.Місяць тому
In this video, I tried to show you how to create a minimalistic animated landing page with slider animation for a portrait-showcasing website using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-deo.html Parallax Scrolling Animation: ua-cam.com/video/sc3eI-vgsn0/v-de...
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 3,4 тис.Місяць тому
In this video, I tried to show you how to create a slider animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Image Slider Animation: ua-cam.com/video/36UbHfpakCk/v-deo.html Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-deo.html Parallax Scrolling In Figma: ua-cam.com/video/sc3eI-vgsn0/v-deo.html UI D...
Create Image Slider Animation In Figma | Figma Tutorial
Переглядів 3,7 тис.2 місяці тому
In this video, I tried to show you how to create an image slider animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Accordion Card Animation: ua-cam.com/video/7gQ8XsmubsU/v-deo.html Refracted Glass Effect: ua-cam.com/video/80IxygJl8Cc/v-deo.html Endless Auto Scroll: ua-cam.com/video/n4lbfl5rXsw/v-deo.html UI Desi...
Create ENDLESS CARD CAROUSEL Animation In Figma | Figma Tutorial
Переглядів 2,7 тис.2 місяці тому
In this video, I tried to show you how to create an endless card carousel animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Parallax Animation: ua-cam.com/video/gfhV9SCNTrI/v-deo.html Learn Neubrutalism: ua-cam.com/video/ry8GCmSsiqs/v-deo.html Revealing Scroll Animation: ua-cam.com/video/Dbvxfq3X47k/v-deo.html E...
Create INTERACTIVE Card Hover Animation Using Figma | Figma Tutorial
Переглядів 6 тис.2 місяці тому
In this video, I tried to show you how to create an interactive card hover animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Unique Card Hover: ua-cam.com/video/MoEILx-yD6E/v-deo.html Image Slider Animation: ua-cam.com/video/ygguk1mbdkQ/v-deo.html Sticky Sidebar On Scroll: ua-cam.com/video/4kTjNGrl9yM/v-deo.html...
Create ADVANCED Card Animation In Figma | Figma Tutorial
Переглядів 3,7 тис.2 місяці тому
In this video, I tried to show you how to create advanced card animation using Figma. if you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Up/Down Slider Animation: ua-cam.com/video/5cCe3fM6sPc/v-deo.html Refracted Glass Effect: ua-cam.com/video/80IxygJl8Cc/v-deo.html Learn Bento Grid: ua-cam.com/video/ozr0h2hWBck/v-deo.html UI Design Ch...
Create ADVANCED Image Slider Animation In Figma | Figma Tutorial
Переглядів 57 тис.3 місяці тому
In this video, I tried to show you how to create an advanced image carousel animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Card Swiping Animation: ua-cam.com/video/G2Ri1aV6ky8/v-deo.html Parallax Scrolling Animation: ua-cam.com/video/sc3eI-vgsn0/v-deo.html Endless Auto-Scroll Text Animation: ua-cam.com/video/...
Create UP/DOWN Image Slider Animation In Figma | Figma Tutorial
Переглядів 8 тис.3 місяці тому
In this video, I tried to show you how to create up/down image slider animation using Figma. If you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Endless Auto Scroll: ua-cam.com/video/lnDd49NXqZI/v-deo.html Card Hover Animation: ua-cam.com/video/MoEILx-yD6E/v-deo.html Card Swiping Animation: ua-cam.com/video/G2Ri1aV6ky8/v-deo.html UI Des...
Create PARALLAX CARD Animation In Figma | Figma Tutorial
Переглядів 5 тис.3 місяці тому
In this video, I tried to show you how to create a parallax card animation using Figma. if you found this video useful, don't forget to like, comment, and share this video. Check Out Previous Videos Spinning Carousel Animation: ua-cam.com/video/An9IqPnqu2c/v-deo.html Image Slider Animation: ua-cam.com/video/ygguk1mbdkQ/v-deo.html Learn Neubrutalism: ua-cam.com/video/ry8GCmSsiqs/v-deo.html UI De...
Create MODERN Landing Page UI Design In Figma | Figma Tutorial
Переглядів 12 тис.3 місяці тому
Create MODERN Landing Page UI Design In Figma | Figma Tutorial
Create REVEALING SCROLL Animation In Figma | Figma Tutorial
Переглядів 4,6 тис.3 місяці тому
Create REVEALING SCROLL Animation In Figma | Figma Tutorial
Create Cool HOVER ANIMATION In Figma | Figma Tutorial
Переглядів 2,1 тис.3 місяці тому
Create Cool HOVER ANIMATION In Figma | Figma Tutorial
Create Unique CARD HOVER Animation In Figma | Figma Tutorial
Переглядів 6 тис.4 місяці тому
Create Unique CARD HOVER Animation In Figma | Figma Tutorial
Create ACCORDION Card Animation In Figma | Figma Tutorial
Переглядів 5 тис.4 місяці тому
Create ACCORDION Card Animation In Figma | Figma Tutorial
Create ENDLESS Spinning Carousel Animation In Figma | Figma Tutorial
Переглядів 3,5 тис.4 місяці тому
Create ENDLESS Spinning Carousel Animation In Figma | Figma Tutorial
Create ENDLESS Auto Image Slider Animation In Figma | Figma Tutorial
Переглядів 3,6 тис.4 місяці тому
Create ENDLESS Auto Image Slider Animation In Figma | Figma Tutorial
Create Card SWIPE Animation In Figma | Figma Tutorial
Переглядів 6 тис.4 місяці тому
Create Card SWIPE Animation In Figma | Figma Tutorial
Create ENDLESS Auto Slider Using Figma | Figma Tutorial
Переглядів 3,2 тис.5 місяців тому
Create ENDLESS Auto Slider Using Figma | Figma Tutorial
Create Advanced Image Slider Animation Using Figma | Figma Tutorial
Переглядів 7 тис.5 місяців тому
Create Advanced Image Slider Animation Using Figma | Figma Tutorial
Create Image UP/DOWN Slider Animation in Figma | Figma Tutorial
Переглядів 2,4 тис.5 місяців тому
Create Image UP/DOWN Slider Animation in Figma | Figma Tutorial
Create Full Website With PARALLAX SCROLL Animation In Figma | Figma Tutorial
Переглядів 12 тис.5 місяців тому
Create Full Website With PARALLAX SCROLL Animation In Figma | Figma Tutorial
Create ENDLESS Auto Scrolling TEXT Animation in Figma | Figma Tutorial
Переглядів 6 тис.5 місяців тому
Create ENDLESS Auto Scrolling TEXT Animation in Figma | Figma Tutorial
Create An Animated GRADIENT Inside Any TEXT Using Figma | Figma Tutorial
Переглядів 2 тис.5 місяців тому
Create An Animated GRADIENT Inside Any TEXT Using Figma | Figma Tutorial
Create EXPANDING IMAGE HOVER Animation in Figma | Figma Tutorial
Переглядів 2,5 тис.5 місяців тому
Create EXPANDING IMAGE HOVER Animation in Figma | Figma Tutorial

КОМЕНТАРІ

  • @williamcopelandiv
    @williamcopelandiv 8 годин тому

    Thanks for the tutorial! Quick quedstion, I am trying to use this within a bigger frame on a landing page. When I move it in and prototype it on page, when I get to the section everything goes away except the image slider. How do I go about keeping it on a full page view while keeping the image slider functional?

  • @ruthdmello5008
    @ruthdmello5008 2 дні тому

    How to separate the background and foreground?

    • @pixxelex
      @pixxelex 11 годин тому

      You can use Adobe Illustrator to separate the background

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

    In my case animation is enlarged to the right and down, tell me pls how to make it centered?

    • @ChetnaGehlot-wn1fk
      @ChetnaGehlot-wn1fk День тому

      same here

    • @pixxelex
      @pixxelex 11 годин тому

      Before enlarging, center the constraints of all the things inside the frame. Check 02:14

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

    How did you make part of the paralloax text to go behind the tree

    • @pixxelex
      @pixxelex 11 годин тому

      You need to separate the background of the image

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

    How are you dragging within frame. Which keys you're using?

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

      Hold the "Shift" key and drag the element

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

    Can you please do feedback star rating card animation

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

    How to scroll within frame

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

      You can watch this video to get an idea about scrolling. Check here: ua-cam.com/video/qUUN4zfoq-M/v-deo.html

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

    How should I add this in my website as section while scroling?

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

      You can do it using code or no-code tools such as Framer or Webflow

  • @user-vq9rv5vq5m
    @user-vq9rv5vq5m 5 днів тому

    thank you so much~~

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

    I want an example image bro

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

    i did it but when i insert it with another its not working

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

    in 3:16, how is it able to hide the Group 2 Top right and Top corner from Group 1? Since we have a radial corner. Mine is showing group 2 because it has holes Edit: Nevermind. I missed the step to make the frame corner to round

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

    great tutorial! I just started learning Figma and this video really did help me! Thanks a lot :)

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

      You're very welcome!

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

    bro can share the link so that we can get full access to this fantastic work??

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

    osmmm broo ❤❤

  • @manojbagdare526
    @manojbagdare526 9 днів тому

    Very Helpful

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

      Glad to hear that

  • @Carzy_edits_
    @Carzy_edits_ 9 днів тому

    Thanks bro cans you do a ps 5 slider

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

    Hi! Nice video!! can we export this to powerbi?

    • @pixxelex
      @pixxelex 9 днів тому

      Sorry, we can't

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

    what do you use for recording prototype ?

    • @pixxelex
      @pixxelex 9 днів тому

      OBS

    • @Divyaurjaa
      @Divyaurjaa 9 днів тому

      @@pixxelex obs doesn't show cursor (mouse) while recording any prototype what to do ?

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

      Check the OBS settings once, I have never faced this issue

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

    Than you so much

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

    How to enter the images of marvel form which plugin

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

      I have downloaded them from Pngwing

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

      @@pixxelex Thank you so much

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

    Beautifully done

  • @gheedAlsolaim-yi1jr
    @gheedAlsolaim-yi1jr 12 днів тому

    how you change the text ? in 4:35

    • @pixxelex
      @pixxelex 9 днів тому

      Use arrow keys to move the text

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

    how you scroll a text "Landscape" to "Portrait" ? its too difficult to understand this thing can you please help me ?

    • @pixxelex
      @pixxelex 9 днів тому

      Just use arrow keys to move anything in the frame

  • @benjysmedia8164
    @benjysmedia8164 14 днів тому

    Another great tutorial

  • @kbob6980
    @kbob6980 14 днів тому

    Thanks a lot Pixxelex for your videos. I'm learning web design and I find your channel super helpful and inspirational <3

    • @pixxelex
      @pixxelex 14 днів тому

      Happy to hear that!

  • @gheedAlsolaim-yi1jr
    @gheedAlsolaim-yi1jr 14 днів тому

    thaaankkk yoooooooooooou

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

    thoght it would a lot more complicated THANKS

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

    During Prototyping, When i set the variable they can tell me first covert to professioal. Please tell me what should i do?

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

    can you share this template? its awesome

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

    Thanks for teaching me, god bless you

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

    Thank you for an amazing work.

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

    Simple and direct to the point, namaste! 🙏

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

      Glad it was helpful!🙌

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

    my first 2 slides are not working rest is working. Donno why?

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

      Please check the prototype settings once again or restart the prototype.

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

    Tip: Use grid view may seems situational but it's VERY useful!.. specially if you're new.....

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

    cant scroll anyway :( i failed. the scroll are reset to original position when it was end. not auto scrolling

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

      Follow the tutorial properly. It should work.

  • @akshbusines._
    @akshbusines._ 16 днів тому

    It’s working ❤

  • @Designlearners99
    @Designlearners99 17 днів тому

    Wow

  • @benjysmedia8164
    @benjysmedia8164 17 днів тому

    Lovely Am definitely doing this. Replicating this but not using movie characters🔥

    • @pixxelex
      @pixxelex 17 днів тому

      Glad it was useful!

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

    Thanks a lot for sharing! Please where can we find quality mockups like you used in this video?

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

      I have downloaded these mockups from Apple's official website

  • @ThoseThreeGamers
    @ThoseThreeGamers 20 днів тому

    You didn’t tell us to hit shift on one of the later components so this sucks next time tell us very unprofessional but Figma also sucks donkey shit so

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

    What did you did at 3:35 ?

    • @pixxelex
      @pixxelex 9 днів тому

      Created a duplicate of the frame using (Ctrl + D)

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

    omg Jesus, I watched 5 videos and yours was the only helpful one!!! thank you sooooo much!!!

  • @joshua.olatunji
    @joshua.olatunji 23 дні тому

    Wished you walked us through it voice over.

  • @dannylloyddamgo399
    @dannylloyddamgo399 24 дні тому

    Thank you so much for this! So creative <3 More ideas please :)

    • @pixxelex
      @pixxelex 24 дні тому

      Thank you! Will do!

  • @ToluwanimiVictoria
    @ToluwanimiVictoria 24 дні тому

    is there another way i can add video without using figma Pro? cuz mine is free and when I tried adding video like you did figma said I need to use a professional account.

    • @pixxelex
      @pixxelex 24 дні тому

      Sorry, we can't add video without a professional account.

  • @nathanieltwumasi9760
    @nathanieltwumasi9760 24 дні тому

    bruh i just enjoy your tutorials. You're a very good teacher

    • @pixxelex
      @pixxelex 24 дні тому

      Glad you like them!

  • @chiragkabra8081
    @chiragkabra8081 24 дні тому

    crazy work and easy explanation please also do some scroll animation bro

    • @pixxelex
      @pixxelex 24 дні тому

      Thank you! and I have created tutorials on scroll animations. You can find them on my channel.

  • @touhidaakter6149
    @touhidaakter6149 24 дні тому

    how do you export your animation

    • @pixxelex
      @pixxelex 24 дні тому

      Unfortunately, we can't export this animation

  • @anishamalhotra6195
    @anishamalhotra6195 24 дні тому

    Just wow. ❤❤❤