Really simple Parallax Animation Using Smart Animate (Figma)

[@PrashantKumar-ou9wt]

A simple move yet so interactive and amazing effect! Just stunning

[@AMDesignAndDev]

Be sure to subscribe and hit the notification icon! It really helps the channel grow and motivates me to keep on investing on the channel.

[@AMDesignAndDev]

Hey guys, I've launched a Paid Figma Noob to Pro course that can help you take your Design and Figma skills to the next level! You can access it here: asaad-mahmood-s-school.teachable.com/p/figma-noob-to-pro My subscribers and viewers can get a 50% discount by using the voucher "AMSUBSCRIBER".

[@shesoldmychicken7241]

OMG this is exactly what I've been looking for months! Thank you!

[@anamar3901]

love your tutorials! best channel on figma, for me

[@Sachinguptafilms]

Simple and perfect ❤

[@andredataviz]

Amazing man, its beatifull!!!

[@sonagevorgyan3918]

Just WOW. At last I know how to do it. Thanks a loooooot

[@sw9554]

Hey amazing stuff! Thank you for sharing ❤️

[@AMDesignAndDev]

My pleasure!

[@AttackoftheAsian]

I really wish figma has a “on scroll” trigger or better yet “while scrolling” trigger

[@AMDesignAndDev]

Me too!

[@citizenx3801]

Great Job. Wow! I'm subscribing.

[@AMDesignAndDev]

Thanks man!

[@aimelise]

Nice job! You are super talented. Thanks for the video.

[@Cleventina]

Nice work! Thank you for tutorial ❤️🙂

[@sungrg8766]

Hello, Can you also put a tutorial on how to swipe back up please. If it's already done, please drop me a link to the video. Btw absolutely loved your design.

[@AgUzodinma]

I've missed this Dante May the Lord strengthen and help you Dante ❤

[@shubhamchopade5577]

You are the best bro🙏🙏🙏🙏🙏

[@silverwings8486]

Beautiful work

[@saravjeetsandhu3531]

Amazing video brother

[@XiaSiyi]

Great teaching! But may I ask why your second frame is not the same size as the first, but it has no effect in the show?

[@luizsilveira4066]

Wow. Great job.

[@umutavci]

Amazing mate, thanks for your time to explain

[@victoriankem6120]

Nice and amazing, please reduce your speed. Thanks

[@adied7725]

super informative easy to understand and no waffling...thanks you got your self another subscriber. How i can animate a whole paragraph of text in a hero section?, please ...to animate in then type all paragraph and then disappear ?, i have seen and know how to animate one word at a time but for sentences i dont find anything in figam or your tube...thanks again for yourhelp or pointers, please

[@IntheBellyofaWhale]

Amazing video🤝

[@mirsdoodles]

Nice video, I love it! After following up your vid, I just want this to be scrolled back to the top. Can you tell me how&where to link in?

[@muhdhaziq.s1608]

amazing tutorial..

[@Trina18]

Beautiful 🤩

[@UyenNguyen-ou3zz]

Thank youuu🎉

[@ЛераЯрошенко-м7с]

Сool! Thank you, very helpful!

[@akatsukinoh7660]

why are you so awesome

[@shortvidsyt859]

Cool video

[@ravipanwar7442]

amazing

[@moritzsteinke514]

Hey, first if all thanks for the great video! Do you know if I can translate this animator stuff into jetpack compose if I wanna creat an app?

[@michelleolashile4082]

this is really gold. thank you so much but how do we scroll back to the top after scrolling down... what interaction should we use?

[@AMDesignAndDev]

You can add any animation you want, mouse enter, mouse out, click, drag etc. Note that figma is not building full fledged prototypes, things like these are only for presentation purposes.

[@michelleolashile4082]

@@AMDesignAndDev thank you

[@random_world88]

PLS try not to speed up the video , bcoz we might wana see how you work for better understanding

[@AMDesignAndDev]

Got it!

[@FilipBO-t4x]

Please link from the photo or keywords to search such pictures

[@AMDesignAndDev]

You can find them on Freepik, I have added a search result: www.freepik.com/search?format=search&query=vector%20landscape

[@FilipBO-t4x]

@@AMDesignAndDev Thanks!

[@DandydelSur]

How can I do that effect but with a scroll down with the mouse?

[@vincentkangethe1560]

Really nice work Could you please share the two background images? Thanks

[@samsmedia5640]

This is really good How to add figma prototype animation in landing page or web pages?

[@AMDesignAndDev]

Thanks, you can't as an svg or anything, you can create a movie and do that, or include it as an embed code, but it wouldn't be in html/css form.

[@faizan0_040]

5 🌟 boi

[@creativedesignstudio-ankita]

Nice 👍

[@AMDesignAndDev]

Thank you :)

[@agungages]

Can it be responsive with parallax?... I'm newb

[@zhenzhen4551]

Thanks for sharing! But what will happen is you scroll back up? will the hero still shows?

[@AMDesignAndDev]

Not right now because I haven’t linked it. But you can easily link it.

[@simplefolding]

Hi @@AMDesignAndDev Can we scroll back the frame #2 to #1 if we have 3 frame ?

[@karlodagi5602]

looks amazing! I'm struggling with getting a click prototypes work on one of my buttons. The idea is when the button in the app is clicked on that the button will change the color but also open a overlay. Is that possible?

[@MaggieKayy]

You can only have one on click action for a button, so it will either change color or open the overlay

[@FilipBO-t4x]

how do you group select the elements from the photo?

[@jum_py]

It can be directly exported to code?

[@allanfernandes829]

Where did you the assets such as the background image etc.

[@AMDesignAndDev]

Freepik

[@zakariacolor1905]

Can you please make this with code. Or if you have another similar video but made with code. Thank you.

[@AMDesignAndDev]

Can do, its very easy.

[@MaggieKayy]

I love this!! Is there a way this could work by just scrolling down with the mouse?

[@AMDesignAndDev]

Not in Figma at this point. We can add a on mouse enter event on the frame that can fake that effect though.

[@MaggieKayy]

@@AMDesignAndDev Thankyou, let me try that

[@AMDesignAndDev]

@@MaggieKayy If you want, I can do a video on that.

[@evgeniyagenaeva7377]

@@AMDesignAndDev yes, please :) it would be super helpful

[@marianavida_]

where I can get more of this type of illustration? someone heeelp me

[@AMDesignAndDev]

Freepik

[@realmind6014]

Thank you very much! it worked, but my text just appears, it doesn't move in like your intro text. how can I solve this? I want that my intro text move to the place it should be like yours and not that it just appears, hope you can understand what I mean

[@realmind6014]

Got it, I accidentally changed the size of the copied text, it has to be exact same thing or you won't get a fade in effect

[@gromhellscream5581]

I cannot unclip the mask and manually control the vectors of the image? Anyone can help?

[@anadibhusanpatra6938]

Can you send this figma file please 🙏🏽

[@anadibhusanpatra6938]

Share

[@enriqueruiz320]

🤯

[@souravbarua2049]

Nice! How you save this interaction into video to upload dribbble? Screen recorder?

[@AMDesignAndDev]

Yup.

[@souravbarua2049]

@@AMDesignAndDev which one?

[@AMDesignAndDev]

@@souravbarua2049 I just use QuickTime on Mac usually. It exports an mov file which I then convert to MP4 using an online converter.

[@AMDesignAndDev]

@@souravbarua2049 I sometimes also use screen flow, but its speed and you don’t really need it for this task.

[@1deplatt]

How about making it happen On Scroll?

[@AMDesignAndDev]

Not easy in Figma. Can be done in protopie or principle

[@emanfatima5801]

whenever i prototype the after delay option is grey.....plz tell me any solution

[@AMDesignAndDev]

Share your file, I can have a look.

[@skylarveruca]

0:06

[@sonnyjuraa]

It`s been an amazing master class. Thanks brother. I tried to follow the same steps as you did. But the thing is smart animate is kinda working weird. It`s kinda adding objects which I didn`t even use on my frame, I checked all my layers. And also, my animations are not as smooth as yours. Is is with the computer or any other settings to make the animations smoother like yours. Would be great if you can help out with my design for just 2 minutes. How can I contact you

[@AMDesignAndDev]

Please isolate the problem, and just create a small file and share it here

[@simplefolding]

The layer must be the same name in every frame

[@micolzampieri9445]

what about don't click on scroll down ma rly scroll with the mouse on the page?

[@AMDesignAndDev]

Scrolling up + down in and having the effect go back and forth will not be possible.

[@AMDesignAndDev]

Figma does not have a scroll based interaction control. You can do that with Protopie!

[@fayechan5257]

good tutorial but u neeed to slow down , as a beginner i can;t follow on some steps that you're doing

[@AMDesignAndDev]

Got it, thanks a lot for the feedback Faye, will try to keep that in mind!

[@nlsmarketing]

you are doing for yourself.......or explaining it to people?

[@AMDesignAndDev]

Both.

[@devroopdas]

please share figma file

[@priyanshukatuwal]

is figma free?

[@AMDesignAndDev]

Yes!

[@landwirtschaft2116]

Basically.

[@sebastianpendragon]

Shame parallax isn't free, because I can't buy that plugin.

[@ДмитрийТомащук-к5й]

Thank you for your video, your work, it will help me learn and develop in a new profession for me🙏😌 no war! Stop Russian Aggression! live free Ukraine 🇺🇦 🫡

[@ДмитрийТомащук-к5й]

if I don’t die from a Russian missile attack, this is not a joke, about 40 minutes ago there were 3 missile attacks on my city, so far you can’t find such news on the Internet, but tomorrow I’m sure you can already check and verify my words. the city of Zaporozhye. God bless us and our army. this afternoon I studied figma, and met with friends to drink coffee, and at night I hide because of powerful explosions, car alarms, still have not turned off after the explosions. this is the reality of Ukraine. if everything goes well overnight, during the day I will try to repeat your work in figma .. because I need a new job, at a computer, and with the ability to work remotely