Create PARALLAX SCROLL EFFECT In Figma | Figma Tutorial

#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.co...
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

[@kev16]

@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

[@angelacalvin5790]

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]

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?🥲

[@nataliafurca6278]

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

[@pixxelex]

Glad it was helpful!

[@darkdevil8133]

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

[@daferichards]

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

[@pixxelex]

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

[@snapback9221]

@@pixxelex Is there a tutorial on how you did this

[@irabanana8755]

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

[@pixxelex]

Glad it helped!

[@Coolworld977.]

Its amazing 😊 Good job

[@pixxelex]

Thank you so much!

[@greensnek]

Great demonstration

[@pixxelex]

Thank you!

[@Titan0_7]

THANKS BRO U GAVE ME AN IDEAA TO TEST MY SKILLS

[@pixxelex]

Great!

[@lemandadashova]

Perfect!🤩

[@pixxelex]

Thank you!

[@stefanmaurer8536]

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

[@pixxelex]

Yeah!

[@Ziyechhdzub]

can anyone tell me how to seperate element from pic ?

[@samirghosh9049]

Awesome work!

[@pixxelex]

Thanks a lot!

[@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.

[@emma966]

very helpful, thank you

[@pixxelex]

Glad it was helpful!

[@Afzal-fz7co]

how to add AI file in figma help me

[@monjurulislam9695]

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

[@pixxelex]

Glad you liked it

[@truongbao-cn3uk]

Please tell me which website did you get these beautiful photos from?

[@pixxelex]

Freepik

[@truongbao-cn3uk]

@@pixxelex thank you very much 😉

[@DutchBomberman]

Very helpful

[@pixxelex]

Glad it helped

[@sandeepv1306]

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

[@Spiritbrothersinc]

Sure I can

[@King_bob_07]

Nice tutorial ❤

[@pixxelex]

Thank you! 😊

[@vago9308]

Thank you, sir

[@pixxelex]

Welcome!

[@Emmetttttttttt]

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

[@pixxelex]

You need to separate the background of the image

[@ruthdmello5008]

How to separate the background and foreground?

[@pixxelex]

You can use Adobe Illustrator to separate the background

[@star-devil9157]

Best video of the day... ❤

[@pixxelex]

Thank you ♥

[@UXDEVIKA]

damnnn😍😍😍

[@BigRobAustria]

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]

Yes, you can implement into WordPress using page builders.

[@oke-kk4he]

is scroll and drag is samething?

[@loraui]

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

[@mauriciosanchez3655]

¡Genial!

[@Gorilla_brown786]

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

[@pixxelex]

I've used Adobe Illustrator for removing the background

[@Gorilla_brown786]

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

[@pixxelex]

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

[@leanstrong755]

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

[@pixxelex]

I've used Adobe Illustrator to separate the background

[@ManhwaScans976]

Image should be downloaded in which format

[@pixxelex]

Download the Adobe Illustrator file

[@coral.that.idiot.]

Thank you! How about on scroll ?

[@pixxelex]

Welcome! It's just a prototype

[@Titan0_7]

please what did u use to remove the background

[@pixxelex]

I have used Adobe Illustrator to remove the background

[@deekshangree2323]

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

[@pixxelex]

Check the description, I have given the image link

[@rajutry]

Thanx Bro

[@pixxelex]

Welcome!

[@fatine____3901]

I did what you did step by step but it doesn't work 😢

[@pixxelex]

Please try once again. It should work.

[@GreenDevBabe]

This is NOT a Figma tutorial because I must to change and save images in Photoshop

[@msj8285]

Sweeeet

[@pixxelex]

Thanx!

[@NIK-xs3bl]

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

[@pixxelex]

Yeah, it's just a prototype

[@easymathlearnings]

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]

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

[@deekshangree2323]

How to seperate BG and foreground

[@pixxelex]

You can use Adobe Illustrator

[@deekshangree2323]

thank you @@pixxelex

[@deekshangree2323]

Can you post a video on it @@pixxelex

[@mottoprint]

Get some premium AI voice to narrate your videos. Or a different one....this free one is overused and fatigued to death. Other than that, thanks.

[@pixxelex]

Thank you for your suggestion

[@HayatEbay]

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

[@kingarasan2004]

It is an amazing tutorial

[@pixxelex]

Thank you!

[@BowieShum-o7y]

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

[@pixxelex]

Check the description for the asset link

[@abdulrehman-ly7dw]

You solved my doubt in seconds❤

[@pixxelex]

Glad it helped you

[@mojito1216]

Vamos❤

[@Craftism]

That's facking Awesome 🍪

[@pixxelex]

Thank you!

[@kausarshaikh1844]

Tried this out just now it hardly takes an hour but trust me the results are ammmaazinggggg🤯😎

[@pixxelex]

Glad it was helpful!

[@gauraangeepalsani7662]

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

[@pixxelex]

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

[@gauraangeepalsani7662]

@@pixxelex Thank you!

[@nedaashraf2423]

Great

[@pixxelex]

Thank you!

[@suniljadhav1889]

nice

[@pixxelex]

Thanks

[@DaveBraunger]

Very cool! How would you get this to html?

[@pixxelex]

Thank you! and you have to code it manually

[@cathy4700]

Thank you so much!

[@pixxelex]

You're welcome!

[@ARUN000FF]

i found new figma legend bro love you

[@pixxelex]

❤