Create PARALLAX SCROLL EFFECT In Figma | Figma Tutorial

Подписаться 9 тыс.

Просмотров 63 тыс.

50% 1

#figma #parallax #figmaanimation
In this video, I'll show you how to create parallax scrolling animation in Figma. If you found this video useful then don't forget to like, comment, and share this video.
Image Link: www.freepik.com/free-vector/s...
Check Out Previous Videos
Fingerprint Animation: • FINGERPRINT SCANNING A...
Drop Down Animation: • How to Create Interact...
Onboarding Animation: • Create App ONBOARDING ...
UI Design Challenges: • Daily UI Design Challe...
UI Design Resouces: • UI Design Resources
Figma Animation Tutorial Playlist: • Playlist
Keywords: figma, figma tutorial, parallax animation, parallax scrolling animation, parallax scroll effect, figma prototypes, figma tutorials, figma tutorials for beginners, parallax animation in figma, website animation in figma

Опубликовано:

9 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 88

@darkdevil8133 2 дня назад

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

@nataliafurca6278 4 месяца назад

Love it! Very helpful, just what I was looking for, thank you! ❤

@pixxelex 4 месяца назад

Glad it was helpful!

@mauriciosanchez3655 3 месяца назад

¡Genial!

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

Vamos❤

@kev16 4 месяца назад

@10:10 You can drag and select multiple prototype arrow paths. You can hold shift to select even more. This Dave's you time from doing one at a time

@irabanana8755 2 месяца назад

that's amazing! thank you, very clear! great job ;-)

@pixxelex 2 месяца назад

Glad it helped!

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

Great demonstration

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

Thank you!

@UXDEVIKA 3 месяца назад

damnnn😍😍😍

@Titan0_7 5 месяцев назад

THANKS BRO U GAVE ME AN IDEAA TO TEST MY SKILLS

@pixxelex 5 месяцев назад

Great!

@monjurulislam9695 5 месяцев назад

❤❤Great! I appreciate for it. Thanks!❤❤

@pixxelex 5 месяцев назад

Glad you liked it

@abdulrehman-ly7dw 5 месяцев назад

You solved my doubt in seconds❤

@pixxelex 5 месяцев назад

Glad it helped you

@emma966 3 месяца назад

very helpful, thank you

@pixxelex 3 месяца назад

Glad it was helpful!

@kingarasan2004 3 месяца назад

It is an amazing tutorial

@pixxelex 2 месяца назад

Thank you!

@nedaashraf2423 3 месяца назад

Great

@pixxelex 3 месяца назад

Thank you!

@Coolworld977. Месяц назад

Its amazing 😊 Good job

@pixxelex Месяц назад

Thank you so much!

@vago9308 3 месяца назад

Thank you, sir

@pixxelex 3 месяца назад

Welcome!

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

Nice tutorial ❤

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

Thank you! 😊

@DutchBomberman 3 месяца назад

Very helpful

@pixxelex 3 месяца назад

Glad it helped

@ARUN000FF 2 месяца назад

i found new figma legend bro love you

@pixxelex 2 месяца назад

❤

@suniljadhav1889 5 месяцев назад

nice

@pixxelex 5 месяцев назад

Thanks

@rajutry Месяц назад

Thanx Bro

@pixxelex Месяц назад

Welcome!

@star-devil9157 5 месяцев назад

Best video of the day... ❤

@pixxelex 5 месяцев назад

Thank you ♥

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

Wonderful demonstration. Thank you for the tutorial. Could you link me to where you got the image and how you separated the background?

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

Thank you! Please check the description for the image link and I have used Adobe Illustrator to remove the background.

@msj8285 4 месяца назад

Sweeeet

@pixxelex 4 месяца назад

Thanx!

@stefanmaurer8536 4 месяца назад

You can press and hold the space bar while moving elements around without throwing them out of the frame.

@pixxelex 4 месяца назад

Yeah!

@angelacalvin5790 4 месяца назад

I want to follow this but I don't understand the separating the foreground and background in AI. The layers are not seperate like what you have in the tutorial.

@009hawks 4 месяца назад

Thats a nice question but you can ungroup all the layers in AI, then select your desired layer copy it ctrl +C and then paste ctrl + V directy to figma, and repeat this process until you get all your desired layers seperated.

@Peace_seeker Месяц назад

@@009hawks that's a lot or unnamed groups and layers ! How can i separate the?🥲

@baturesolomon4687 Месяц назад

Awesome video but what tool was used in creating the different individual elements? Like are there tools that be used to remove the whole background and leave the moon?? Or the other trees? You get my question right?

@pixxelex Месяц назад

I have used the Adobe Illustrator to separate the background.

@sandeepv1306 Месяц назад

Loved this... But can someone help me to publish this as a dedicated website pls

@DaveBraunger 4 месяца назад

Very cool! How would you get this to html?

@pixxelex 4 месяца назад

Thank you! and you have to code it manually

@HayatEbay 2 месяца назад

guys how do you separate the background and frontground of the image

@Afzal-fz7co 3 месяца назад

how to add AI file in figma help me

@Titan0_7 5 месяцев назад

please what did u use to remove the background

@pixxelex 5 месяцев назад

I have used Adobe Illustrator to remove the background

@oke-kk4he 5 месяцев назад

is scroll and drag is samething?

@loraui 4 месяца назад

No, that's what I was going to ask, about how can I do it with scrolling. Because it's different. To drag is to click and move the cursor and scrolling would be using the mouse scroll up and down

@BigRobAustria 4 месяца назад

Show love and subscribe. Thank you. Quick question is it possible to implement this into Wordpress (elementor) or better done without elementar or other page builders. Just wondering… thank you 😊

@pixxelex 4 месяца назад

Yes, you can implement into WordPress using page builders.

@gauraangeepalsani7662 2 месяца назад

Hi, where did you get these images? Also, how did you separate the foreground and background?

@pixxelex 2 месяца назад

You can get these images from Freepik and I have used Adobe Illustrator to separate the background.

@gauraangeepalsani7662 2 месяца назад

@@pixxelex Thank you!

@BowieShum-o7y 17 дней назад

Do you have a link to that background asset you are using in this tutorial?

@pixxelex 17 дней назад

Check the description for the asset link

@leanstrong755 4 месяца назад

btw how to separate the image from its background, help me out in new to this.

@pixxelex 4 месяца назад

I've used Adobe Illustrator to separate the background

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

From where did you get these pictures Where can I search for?

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

Check the description, I have given the image link

@ManhwaScans976 2 месяца назад

Image should be downloaded in which format

@pixxelex 2 месяца назад

Download the Adobe Illustrator file

@Gorilla_brown786 4 месяца назад

Bro how did you separate the image from its background without the background being cut at 0:19? Please explain.

@pixxelex 4 месяца назад

I've used Adobe Illustrator for removing the background

@Gorilla_brown786 4 месяца назад

@@pixxelex Bro please explain in a video i need it. It's a request from your subscriber.

@pixxelex 4 месяца назад

Just copy the foreground layers (inside Adobe Illustrator) and paste them inside the Figma. Same with the background layers.

@NIK-xs3bl 18 дней назад

It's on drag not a scroll tutorial for that too

@pixxelex 17 дней назад

Yeah, it's just a prototype

@easymathlearnings 5 месяцев назад

Your tutorial is great and I've learned many new things. But please use your own voice and explain all the things. For example you're telling what to do with the next frame but you're not explaining why we have to make changes in the previous frames. (And also the AI voice is annoying)

@pixxelex 5 месяцев назад

Thank you so much for your feedback. Will try to add my own voice in the future videos.

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

How to seperate BG and foreground

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

You can use Adobe Illustrator

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

thank you @@pixxelex

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

Can you post a video on it @@pixxelex