Figma Smart Animate Tutorial - Parallax effect with Gif animation on Website

Figma Smart animate Tutorial - Gif and Parallax animation for Website.
Smart animate parallax Website Design for project Presentation. I will show design process, animation techniques and recreate animation in Figma. I'll show How you can Animate website project in Figma.

――――――


――――――

00:00 Start
00:46 First screen
05:35 First screen Graphs
09:00 Create gif for animation
13:40 Parallax Bottle
20:21 Zoom / Parallax / Masks
23:14 Create simple gif in Photoshop
27:40 Hand with bottle
29:41 x4 bottles
31:25 Simple parallax
35:03 Fade in white
36:24 Final touch

💪 Follow me

👽 Igor Vensko
Web / Graphic / UI / UX / Designer
Always available for interesting projects

Working in Photoshop / Adobe XD / Sketch / Principle / Illustrator / Indesign / Blender

~~~~~~~~~~~~~~

📃 Images - Adobe stock / Pixabay / Unsplash
🎼 Music - Youtube Audio Library / Adobe stock

Some of the links above may contain affiliate partnerships, meaning, at no additional cost to you, I may earn a commission if you click through to make a purchase.

#website #figma #animation #tutorial #ui #ux #designer #parallax #igorvensko #freelancer #motion #photoshop

[jean-lais]

Thank you for sharing your interaction design skills.

[BreathingInPixels]

Wow Man... How can you be so amazing. Completely love it.
I wished a lot for such animations in Figma and here you made my day...
Thank you so much Bro for sharing your talent with us.

[lfataichiedinburgh]

I've never used Figma before till watching you this is an amazing tutorial. How do you take from figma to wordpress? thanks again.

[RutaNorm]

This is just amazing! Just was wondering how to sapparte bottle from the cap? It looks insane 🤩

[rheinatamara]

developer crying in the corner rn HAHA, love the video btw! auto subscribe

[hadentrader]

Nice! How do you convert the entire animation to landing page or web pages? Do you have to code the whole thing?

[aspectstudios]

Cool work but is there anyway to make this animation work while scrolling? I can see that this happens only when clicked

[KareemSadekGI]

can this be recreated in XD ? and really nice tutorials in almost every way, thanks for sharing

[alexwestgate]

Hi, I was wondering if It was a possibility to animate a video on scroll, each cursor down movement plays the video frames on a bit

My idea was to export the video as a image sequence, then animate each individual frame downward with smart animate, but with 30 second videos that could take FOREVER,

Thanks,
Alex

[silvinapedersen]

Thank you for this amazing tutorial!!! You know Gif in prototype take long time to start... do you have any suggestion?

[emanfatima]

how can we go back with scrolling randomly....like we do in any screen

[Spooki_Ghst]

hello there! great work! i am wondering if it is possible to do these animations as we slowly scroll up and down the page as opposed to on click, like you're using here..?

[sukhoww]

Cool animation! And how to upload it to a gif or mp4 to insert it into a dribblle shot?

[nhunmochii]

Great tutorial! After doing all the animation in Figma, did you record your screen and import it into After Effect to create the Video Mockup?

[ksohan]

Hi! Great Tutorial! Is there a way to download the prototype animation as a GIF in Figma? Thank you.

[samsmedia]

How to add figma animation in landing page or web pages?

[rahulkh]

Yaa this tutorial is really awesome but where to find high-resolution png files (like the bottle).

[cholson]

Love love love this instruction. Having a start to finish flow of how you approach things is very educational and helpful. Thank you!

[princedhiman]

Which tool is best for to convert into svg files. Like this please help me out.

[adadast]

Beautiful work, thank you for sharing! Your animations are so ingenious and well done. It would be great if you would show more FIGMA tutorials ;)