Page Indicator Bounce Effect – Figma Animation Tutorial using Smart Animate

Hey Everyone, This is Udayraj, and welcome to new Figma Animation Tutorial. In this video, we're going to recreate this animation in Figma. This stunning Animation is created by Lars for Hike One. This pagination bounce effect will be useful, especially on onboarding screens. So without further delay, let's get started. Let's start with the standard Dribbble shot frame size, which is 800px by 600px. Start with the background fill color. I'm selecting the proper shade of Blue. Next, we have to add pagination indicators created by 3 circles. Give them fill color of white and align them properly to frame. To create a bounce effect, we need to create an Arc. Let's start by adding Ellipse and modify its properties. Place it over pagination indicators and make sure that it precisely matches the Circles below. Ark should be a little smaller than the perfect semicircle. We need to have rounded edges for this Arc, but Rounded corners are unusable here. Let's duplicate these circles below and use them as edges. Align them perfectly with Arc. This edge should not touch the circle below, so let's modify the arc length. Add this Arc and corner circles together in Frame. Rename it to bounce to make it easy to find. Now here's the crucial part. Add this Bounce frame into another Frame & reduce the outer frame size to half. Select Clip content to make it a Mask. Now, shape only within this Frame will be visible. Select the Bounce frame within it & Rotate it by 180 degrees to align it with 1st circle. It won't be visible now because of Frame Mask. Now add a rectangle of the exact size as the main Frame. Let's make it Purple, which is our 2nd slide color. Move it out of the visible area by changing the X position. Make sure that it's still within the main Frame. Duplicate this entire setup. Select the Bounce frame and rotate it to make it visible. Change Page indicator colors to pure white fill. And move the Rectangle background to cover half of the Frame. Send this layer to the back. This is our 2nd part of Animation. Now connect both of these Frames using Smart animate. Before moving ahead, let's validate our Animation. It looks laggy when it loads for the first time but don't worry. 2nd time onwards, it's super smooth. This looks good. Now let's finish this Animation. Duplicate 2nd Frame. Move the rectangle completely inside a frame. Tweak indicator opacity to make it look inactive. Select the Bounce layer again and rotate it away. Make sure that it's not visible on the first indicator. To create seamless Animation, Connect 2nd Frame to the third one with the smallest Time delay of 1ms, Animation as Smart Animate, Ease out with 300ms. Preview to see it in action. Superb. This is working exactly as expected. Select all 3 frames and duplicate them to reuse in the next section. The starting point of the Next Frame is Purple Frame. Let's change color. Its transitioning into Orange. So select our rectangles and change its color too. I'll keep it Red. Tweak Page indicator colors to make 2nd indicator look Active. Now let's move the starting point of our Mask Frame to the second indicator. Note X position of Frame. Apply X position of the Mask frame on 2nd and 3rd Screen & also change indicator colors. Remove tap interaction on Purple Frame & add a time trigger of 1ms. Change easing to Ease In. Preview this. Ohh, we have to connect this 1st section with the next. Connect the Endpoint of section one with the next using time trigger as 1ms and Animation Instant. Reload Animation. Looks perfect, nothing to complain. To reverse this Animation, lets duplicate section 2. Remove connections. Add new connections in a reverse way. Connect the Endpoint of Section 2 with the start point of section 3 with a time trigger as 1ms and Instant Animation. Reload Animation to see this in action. Cool. I can't wait to complete this Animation. Duplicate section 1 to use as Section 4. Connect the Endpoint of section 3 to the start point of section 4 in a similar way. Make all connections, just like section 3. Connect the last Frame of Section 4 to the 1st Frame of Section one. Preview animation. To make it seamless loop replace tap interaction of 1st Frame to Time trigger. Reload Animation. Looks fantastic. Let's compare this with Dribbble animation. Looks like there is a small pause in between 2 transitions. So let's tweak our delay in between 2 sections. I'll change it from 1ms to 100ms. Reload our Animation. Wonderful! It'sIt's hard to believe that it's recreated in Figma in Under 15 mins. Do you find this useful? Let me know in the comments below. Hit like and Subscribe to channel if you have not done that already. Thanks for watching this till the end. I'll see you in the next exciting tutorial.

Channel: Udayraj Sathe

Views: 16,848

Keywords: animation in figma, loading animation in figma, figma smart animate, smart animate figma, auto animate in figma, figma animation tutorial, advanced animation in figma, lottie animation in figma, smart animation in figma, figma animation prototype, figma animation website, figma animation gif, figma onboarding, smart animate vs auto animate, smart animate matching layers figma, figma smart animate examples, figma smart animate rotate, Auto animate figma, Figma animation

Id: aw_54E6wGdE

Length: 11min 49sec (709 seconds)

Published: Wed Sep 16 2020