How to Create a Fingerprint Scanner Animation

In this tutorial, you can learn how to create a fingerprint scanner animation.

Step 1 - Setting Up The File

Set up the file correctly to ensure that all elements are properly aligned throughout the animation.

Start by creating a grid as the bottom layer. This grid will act as a reference to keep all moving parts aligned. Since the frame consists of four separate parts that will move independently, the grid ensures that they remain properly positioned no matter where they go.

Create a group that contains both the frame and the fingerprint. The fingerprint consists of two states that will be repeated throughout the animation. The initial state is an opaque green fingerprint. The second state transitions between bright green and pink to indicate scanning.

The animation follows three main stages:

• The first stage is the default state, where the fingerprint scanner is inactive and waiting for input.
• The second stage is the scanning state, where the fingerprint expands slightly, and the fingerprint lines animate one by one.
• The third stage is the approval state, where the scanner momentarily returns to its default state before transitioning to pink, indicating a successful scan.

The animation then loops seamlessly by returning to the initial state.

Step 2 - Preparing The Frame Animation

Now lock the grid in place so it remains visible but cannot be moved accidentally.

Start by animating the frame. The frame consists of four separate layers, each moving independently. Select the top-left part of the frame and open the Animate menu. Choose Animate Position. Set the center of origin for this shape directly in the middle of the illustration. Repeat the same process for the other three corners - top-right, bottom-left, and bottom-right - ensuring each one is centered properly.

Step 3 - Animating The Frame Movement

Now animate each part of the frame separately.

Select the first corner and animate its position. Move forward half a second in the timeline and add a keyframe. Hold Shift and move the shape two steps up and two steps left. Repeat the same motion for the top-right, moving up and right. Move the bottom-left down and left. Move the bottom-right down and right.

Apply easing to the animation to make the movement feel more natural. Add an ease-out curve so that the animation starts quickly and slows down toward the end.

Step 4 - Animating The Fingerprint Scale Effect

To simulate the activation of the fingerprint scanner, animate the fingerprint group to increase in size.

Select the entire fingerprint group and open the Scale Animation settings. Move forward half a second in the timeline and add a keyframe. Increase the scale from 52% to 58% while keeping the proportions locked. Apply the same easing used in the frame animation for consistency.

Now, when playing the animation, the fingerprint scanner expands slightly, reinforcing the activation effect.

Step 5 - Animating The Fingerprint Lines

Lock the opaque layer since no changes will be made to it. Focus on the bright green layer, which contains the fingerprint lines.

Start by selecting the first fingerprint line at the center. Move forward half a second in the timeline and add a Stroke Offset Animation. Copy the Dash value and paste it into the Offset Property. Set the offset value to zero over four-tenths of a second, making the line appear as if it is being drawn.

Now animate the second line. Offset the start time slightly by one-tenth of a second for a staggered effect. Extend the duration to one and a half seconds to match the first line’s speed. Copy the Dash value into the Offset Property and set it to zero.

Repeat the same process for the remaining lines, ensuring that longer lines take more time to animate so they maintain a consistent drawing speed.

Step 6 - Reverting To The Initial State

Once the fingerprint scanning is complete, the animation needs to momentarily return to the default state to simulate a "thinking" phase before displaying the approval animation.

Find the moment when the fingerprint scan ends, which happens around nine-tenths of a second. Select the green fingerprint group and animate its opacity to fade out. Hold the opacity at 100% until the scan completes, then fade it to 0% instantly. Also animate the frame pieces to shrink back to their original positions, scaling back from 58% to 52%.

Now, as the scanner "thinks," the fingerprint and frame return to their starting positions.

Step 7 - Revealing The Approval Animation

Now introduce the pink fingerprint to indicate a successful scan.

Select the pink fingerprint layer, but keep it hidden initially. Create a mask to control its visibility. Draw a rectangle covering the fingerprint area. Select the rectangle and the pink fingerprint, right-click, and choose Create Mask.

Now animate the mask to reveal the pink fingerprint from top to bottom. Move the mask above the fingerprint. Add a Position Animation and move forward four-tenths of a second. Bring the mask down, revealing the fingerprint.

Step 8 - Changing The Frame Color To Pink

Now animate the frame color change to match the pink fingerprint.

Copy the pink hex code from the fingerprint layer. Select each corner of the frame and add a Stroke Color Animation. Move forward four-tenths of a second in the timeline and change the stroke color to pink. Repeat this step for all four frame corners.

Now, when the fingerprint scan is approved, the frame transitions to pink for a visual confirmation.

Step 9 - Returning To The Default State

To complete the loop, ensure that the animation returns to its initial state after displaying the approval animation.

As the pink fingerprint fades out, animate the opacity of the mask to go from 100% to 0%. Restore the gradient stroke color for the frame corners. Reset the scale of the fingerprint and frame pieces to their original sizes. Ensure the easing remains consistent across all transitions.

Now, when played from start to finish, the fingerprint animation seamlessly loops, returning to the inactive scanner state.

Step 10 - Final Adjustments

Now, turn off the grid to see the animation clearly.

Review the timing and easing of each transition, adjusting where necessary to make the motion smoother and more natural.

If anything feels off, tweak the speed of the fingerprint line animations, the easing curves of frame movements, or the timing of the approval transition.

Once everything looks polished, the fingerprint animation is complete. Experiment with different timings and styles to customize the effect.

Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!

Related tutorials to help you out:

How to Create a Convincing Bounce Animation - Part 1 | SVGator

Learn how to create a convincing bounce animation animation using SVGator! This tutorial will help you out, watch the video and follow the required steps.

SVGator

How to Create a Convincing Bounce Animation - Part 2 | SVGator

Learn how to create a convincing bounce animation animation (part 2) using SVGator! This tutorial will help you out, watch the video and follow the required steps.

SVGator