How to Create Device Transition Animations - Part 1
Duration: 16:57
In this tutorial, you can learn how to create seamless device transition animations.
Step 1 - Set Up Your Workspace
Begin by ensuring you have your project file open with your background and reference images placed: an iPhone, a MacBook, an iMac, and an Apple Watch. These references will guide your animation transitions.
Step 2 - Draw And Style The iPhone Screen
Start by drawing a rectangle that matches the dimensions of the iPhone screen. Set the stroke color to a purple tone from your palette, and leave the fill transparent so the reference behind it remains visible. Adjust the stroke width to around 6 - 8 pixels and apply a slight corner radius to mimic the iPhone's rounded edges. Name this rectangle layer “screen”.
Step 3 - Center The Screen And Prepare Guides
Align the screen perfectly in the center of your canvas. Use existing guides or create new ones if necessary to ensure alignment is precise. This central alignment will help with later animations and transformations.
Step 4 - Create The iPhone Notch
Using another rectangle, design the iPhone’s top-notch area. Apply the same purple stroke color, increase the corner radius to about 7 to match the iPhone design, and name this shape “iPhone notch”. Align it properly at the top of the screen.
Step 5 - Animate The Screen’s Transition To MacBook
Now animate the transition of the screen to the MacBook size and orientation. Set a two-second duration. First, keyframe the screen’s rotation to the left, ensuring you’re at the two-second mark. Then apply a size animation that resizes the rectangle to match the MacBook screen dimensions. Use the resize tool, not the transform tool, to preserve the corner radius and avoid distortion.
Step 6 - Add Position And Origin Animations
Set the screen’s origin to the center and add both position and origin animations to ensure the screen moves correctly during the transition. This is crucial because the screen transforms into an entirely different shape and size.
Step 7 - Animate The iPhone Notch Disappearing
Since the notch won’t be part of the MacBook, you need to remove it smoothly. Add a morph animation by converting the notch into a path. Morph it by stretching both ends outward, giving the impression it’s expanding. Apply an "Ease Out Back" easing to add a bounce effect. Follow this by animating its opacity from 100 to 0 so it disappears just before the rotation begins.
Step 8 - Create The MacBook Notch
Draw a new, larger notch for the MacBook using the same purple color. This time, use a smaller corner radius for subtle rounding. Center it properly. Animate it to drop into view from the top using a mask. Create the mask with a larger rectangle above the notch, and apply it with an alpha mask setting. Animate its position from off-screen to its final position between seconds 2 and 3, along with an opacity animation from 0 to 100. Again, use "Ease Out Back" for a dynamic effect.
Step 9 - Add The MacBook Body
Now create a large rectangle beneath the screen to represent the MacBook body. Apply a corner radius of about 50, color it purple, and center it. Name it “MacBook body”. Animate it scaling up into view and changing opacity from 0 to 100 over the same period as the notch (2s - 3s). Use the transform tool here since full scaling is intended.
Step 10 - Hold The MacBook Scene Briefly
Let the fully formed MacBook screen and body hold for a few frames (e.g., until 3.5 seconds) so viewers can appreciate the transformation before moving to the next device.
Step 11 - Animate The Rotation Toward iMac Transition
Group all current MacBook elements, unlock them if needed, and apply a rotation animation to the entire group. Begin this rotation around 3.5s and complete it by 4.5s. Use a full rotation (e.g., one full turn) with the "Ease Out Back" easing for a bounce effect.
Step 12 - Animate The MacBook Elements Disappearing
As the rotation completes, begin reversing the previous animations for the MacBook body and notch. Return their scale and opacity to zero right before the iMac transformation begins, so they smoothly disappear.
This technique can be extended to other illustrations, allowing you to replicate the process.
Still have questions? Send us an email to contact@svgator.com and we will get back to you as soon as we can!
Related resources to help you out:
