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

hi everyone if you want to know how i create this full animation in figma take a sit relax and enjoy this video i need to say that this project was created in sketch and animated in principle but then i decided that same animation i can create in figma and today it will be more interesting and useful for other people so let's begin this is full project in figma and let's see how this assets looks from client i have this jpg file and create png files for this bottle and cap cap consists of two layers and this top part of cap in front of bottle and this full cap behind this bottle and looks like this when i center it and match this cap i can close bottle in this way now let's animate this first of all i need to duplicate this artboard then i'm going to prototype tab and press flow starting point rename it to screen 1. when i press this icon i'm going to prototype preview but it show me full page and i don't need it again i'm select this artboard go into prototype tab show prototype settings in device i'm select custom size and set this settings with high 790 okay now when i'm going to desktop preview it will be cut my screen now i'm duplicate this artboard now for more clean view i want to resize these artworks to same height i select this artworks hold ctrl and move this edges to the top to this high 790 and now i can animate on my first screen i want to resize this text with scale 2 just resize and set opacity to zero putting going down side past it to zero bottle going up please cap like this and ellipse smaller okay now select for starboard go to prototype and wired up this to artworks in this panel interaction details i'm select smart animate easy note and duration 24 0. okay now let's see how it looks when i press mouse we have this smooth animation on our left panel we have this flows screen one and screen two i can switch between these screens [Music] and play again my animation okay but one problem that we have this smooth animation if you check instagram it looks different you know it's like a quick shoot like a champagne and then slowly movement and i need to recreate this infigma for this i need to create one more artboard and duplicate forced artwork and now wired up this cardboard and this robot between these two armboards it will be quick shoot like a champagne and between these two hours will be slowly movement okay to create this i am setting this interaction go into interaction tail smart animate and select custom now we will have this custom graph for interaction between our armors i'm already experimenting with this and for my case i have these two graphs okay between these artboards it will be graph like this i can simple copy and paste this coordinate in this field and set duration to 100 okay let's make some changes on this artwork maybe like this okay and between these two artworks it will be graphs like this this will be slowly movement again smart animate custom and let's recreate this graph like this okay iteration 24 0 0 okay all it means that on our first screen with this view it will be quick animation to this view and after this we will have slowly animation to this view okay let's check i have 200 milliseconds and here we have 2 000 milliseconds this is quick this is slowly and on between these are boards i'm set after delay and set zero now let's see how it looks now i'm press first and we have this cool animation now one more time now have quick and then slowly movement if it's too hard to understand you can look at these graphs like one line for one animation see this is one big line for one animation in my case it's quick and then slowly but you can create in different ways can be slowly and then quick and you know you can even create two three four graphs and it can be in different way it's maybe like this then like this and slowly and then super quick you know with these graphs it's always experimenting and experimenting in every single cases in my case it will be it looks like this okay now we can move on and let's create video in figma in figma we can add give animations it can be simple icon animation or small segment of video converted in give but give files take many megabytes and to reduce this file size i will create animation exactly same size as my box in my prototype i have this sizes then i'm going to photoshop and create new document same size as my box in prototype let's create from client i have this promo video with battle and i want to create couple animations using this mp4 file and just drag and drop to photoshop resize this video go into window timeline press create video timeline and we have video that we can edit okay let's find part of video which will be end then just crop from right to the left and let's find start for our segment maybe right here and crop from the left to the right and we have our segment maybe maybe four seconds okay this will be our video for give file let's move this video a little bit to the right maybe like here yeah okay now i have this segment then i'm going to file export render video rename it man drink select my folder and press render now i have this mp4 file same size as my box in prototype and now let's create gif from this mp4 file we can export a gif file from photoshop but i don't like this quality and using mp4 to give converters we have a lot of online converters but i'm using this converter and before to give converter link will be in description now and drag and drop to this converter and press convert okay now we have our give file is 17 megabyte press download now let's go to figma i have this mentoring gif file drag and drop in figma and place to my box now let's create flow for my full page called prototype flow starting it will be through page let's go to animation select full page and if we going down we will have our gif animation looking like a video you know quality is super good and for prototype it's more than enough same technique i use for all other animations let's see how it looks i have animations for this section this section and this section now let's duplicate this artboard with all these animations rename to one and from this last arbor wired up and in interaction details and select after delay 0 millisecond and animation instant it means that after this artboard we are going to full page with all layer duplicate this artboard and now i can delete this layers and resize our board only for three screens it's just for easier animating feature now on this artboard i want to close bottle and move down and make it smaller select all layers and move up now i need to know where is my hive for desktop preview and i can create simple guides just drag from the top right here and now i always know that all my content all these layers need to be between these two red lines select these layers move up and let's create interaction for this artboard this will be on click smart animate is in out and direction 24 0 let's see how it looks when i am click we will have this cool animation for next section i need transformation from this bottle to bottle with water splash now i need to match perfectly this bottles for nice animation now duplicate this artboard and on this left and set opacity for bottle with splash to 0 and this artboard will be 100 let's create transition and in transition details will be after delay zero millisecond and dissolve linear and six hundred now we will see quick transformation from this bottle to this bottle let's see how it looks nice yeah see it's working now i can go to next section duplicate artboard and move these layers up select all these bottle layers rotate move to on this circle again select this layers and move up right here transition with standard settings it will be on click smart animate is in out and 2400 milliseconds let's see all this animation click we have transformation and then we have our rotation and i have one problem with see with this left text to fix it i'm go to this last artboard i'm going to design tab and uncheck this clip content when we click this checkbox it will show us all layers inside artboards and outside and my text now need to be right here let's check when we click yeah it's fix it okay then i'm going to again to this artboard and again clip content now let's polish some elements on this artboard i move this text to the right right here using arrows to go outside artboards and on this artwork move this text to the left again using arrows and button go to the left it means that in animation from this position we will have these project positions for text and from this position we will go to this let's check how it looks when we click we have this text on the right and text on the left transform and rotation now let's make some effect for this section let's move down this place this and this images we can make it this circle smaller and let's see how it looks when we click we have this circle zoom circle and other layers you know float from the bottom move on to next section now i need to copy this section on this artboard move down copy artboard and move up maybe right here create transition and in this section i have mask and these images here we can just move this image down and mask okay i'm going to mask group right here select this rectangle and make it smaller i'll move down this part button and title and for this image this will be you know zoom out image from this big image to the small and again we can make this mask smaller and move down now let's see how it looks when i click i have all this animation one more time nice go to next section i need to copy this give animation paste right here duplicate this artboard and move these layers up and again create transition now on this previous artwork i move down this text [Music] and i know maybe move to the right this animation let's see what we have click and we have this gif animation with titles one we have this gallery section again paste to this artboard duplicate artboard and move up okay in this section i decided this you know simple images and i want to create a simple gif with this bottle and let's make it in photoshop again i need to know exactly size for this gif animation i have these sizes and go into photoshop and create again new document with saying size click create go to window timeline create video timeline and from client i have these two images with no dark and light background just select this image and select dark image let's resize choose this document maybe right here and i need to match dark bottle and light bottle maybe rotate right here okay now i'm delete background and copy my light and copy light image now we're going to this panel and make some edits okay now i can add fade for each of these layers go into this panel choose fade and drag to this layer and drag to this layer now let's make duration maybe for a second okay for a second and let's see what we have we have this light bottom bottle then we're going fade with dark bottle oh okay now let's see dark light dark and light okay we can make it quicker i mean like here let's check dark and light i can save for web like i give just save name it button light just place in right position in figma okay we can delete this place in gallery and now i need a copy from this artboard and paste on previous artwork for animation now let's create transition and let's see what we have click one more time click yeah we have this gif animation in figma let's go to next section this will be this hand with button copy and paste to this artboard duplicate artboard select these layers and move up okay this section consists of a simple background and hand you know png and with title and this bottle hand between this text now on this previous screen i can move down this text and rotate this hand like this move down and this title too even zoom this background let's make transition and let's see how it looks click and we have this collimation oh i have this problem okay ah this is too big image okay let's place behind this gallery one more time nice i have this bottle with hand okay go to next section this will be these four bottles again paste like and now let's make something interesting with bottles okay this is mask and we have this for bottle inside this mask and on previous screen i can you know move this bottle in this place this bottle down a little up and down and on this screen now i can make this mask for full size full screen and maybe title down okay let's see how it looks one click and we have this movement with bottles but i need check this high right here and right here okay we can move this bottle one more time like here and let's see one more time and go let's go next and it will be simple for legs i'm copying all these layers paste to this artboard like this and then duplicate press ctrl d and make more layers now i'm just move all these layers right here and next our board move this layers this layers and we have our footer and now let's create transition for each of these artworks and let's move layers on this previous screen i'm just you know place down these layers maybe rotate this cap then i have this export review going down down down okay and we have you know this insta photo i don't we can maybe go to the right oh no let's make it with mask and create simple rectangle may use as mask then select mask make smaller oops and move these photos down in this title too when we're going to this oh now i need to copy and paste to this artboard like this and our last screen will be only with this footer okay let's check all these transitions okay and let's see how it looks let me go in these bottles then we have this title reviews and this is instagram and photo oh since this we have some problem when we're going to next screen i just forget to copy and paste these instagram photos let's see okay it's working now let's create fade in white and back to our first screen for this i create a simple rectangle with white color then copy and paste on my previous artwork set positive to zero and copy and paste same rectangle to my first screen of this project and set first it to zero now let's create transitions between this last arbors it will be on click is smart animate easy note and 6 hundred and between last arbor and for starboard it will be after delay 600 dissolve in here and 100 in a second now let's see how it looks this is footer i'm click fading and go to first screen of this project now let's see full animation one more time that's all i hope you like it don't be shy like subscribe follow me on instagram big hands and dribble accounts and also you can buy me a pizza all links will be in description have a nice day and see you next time [Music] you

Channel: Igor Vensko

Views: 13,909

Keywords: figma, figma tutorial, figma animation tutorial, how to animate in figma, how to animate prototype in figma, figma smart animate, figma smart scroll, parallax animation in figma, parallax scroll in figma, figma for beginners 2021, figma motion design, figma motion, add gif in figma, how add video in figma, igorvensko, motion design in figma, figma tips and tricks, figma website design, How to Add/Insert Video in figma, figma design, ui, ux, designer, figma tutorial for beginners

Id: SnEjLNwyYAI

Length: 37min 17sec (2237 seconds)

Published: Fri Aug 06 2021