How to Create Device Transition Animations - Part 2
Duration: 21:47
In this tutorial, you can learn how to create seamless device transition animations.
Step 1 - Set Up The iMac Device And Adjust The Corner Radius
Start by introducing the iMac as your next device. You'll scale it up significantly in size, so go ahead and make it larger in your scene. At this point, you might notice the corner radius doesn’t quite match the visual language of your other devices.
To make things more visually consistent and detailed, you should adjust the corner radius and stroke width. You're focusing on the iMac for now, but feel free to apply the same adjustments to all devices later. Set the corner radius to better reflect the iMac’s look - smaller than the others. You’ll also do the same for the Apple Watch eventually since that one needs to be much rounder.
Step 2 - Animate The Resizing Of The iMac
Once your iMac device finishes rotating and lands in its final position, that’s when the resizing begins. Identify the moment right as it starts spinning to the right - this is your starting point for the resizing animation. Hold the device’s original size up until that point, then animate it to grow into its iMac proportions. Let this resizing take place over a span of time, from around 4 to 5 seconds.
Next, check and adjust the position slightly to compensate for the larger size. When using easing animations like “ease out back”, the screen might visually shift, so make sure the iMac stays centered by maintaining the origin and position values. If these are animated correctly, the screen should remain in place.
Step 3 - Animate Corner Radius And Stroke Width
Maintain the corner radius at 30 up until the resizing begins. Then, reduce it to around 10 once the iMac has reached its full size to reflect its more rectangular edges. Likewise, animate the stroke width. Start with a width of 4, hold that until the resizing starts, then increase it to around 10 to give the iMac a bolder, more solid outline.
Step 4 - Add iMac Frame And Base Components
Now turn your attention to adding structural components to the iMac. Start with a rectangular band beneath the screen - use a color like purple, and ensure it’s well aligned. Create two more shapes: one will be the rectangular base, and the other a rounded rectangle to represent a stylized foot. Use the resize tool to prevent strange distortions and round the corners slightly for style.
Step 5 - Animate The iMac Components
Animate the iMac components using reveal and scale techniques. Begin with the frame - apply a reveal animation sliding upward. For the base, do the opposite with a downward reveal. For the foot, apply a scale-up and opacity animation like the one you used for the MacBook body.
To mask these elements correctly, repeat the method you used for the MacBook notch. Create a mask around each part, then use position and opacity animations to bring them into the frame. Use easing (like ease out back or ease back) to give it bounce and fluidity.
Step 6 - Transition To The Apple Watch
Once the iMac animation finishes, pause briefly to let the viewer appreciate the result. Then reverse all previous component animations and fade them out to prepare for the Apple Watch transformation. Hold all scale and opacity properties briefly, then begin your transformation.
Match the Apple Watch size using the resize tool. Shrink the screen dramatically and tweak the origin and position if necessary to keep everything centered. Use easing again to soften the animation. Change the corner radius to something dramatic, like 50 or 55, to reflect the watch's rounded edges. You can also adjust the stroke width - try 12 for a bolder look.
Step 7 - Add And Animate The Apple Watch Details
Create the watch face by drawing a rounded rectangle. Then add the band using another rectangle, assigning the same purple color and a corner radius. Use visual alignment if the auto-align seems off. Next, create the Digital Crown - this will be another small rounded element aligned to the center right side of the watch.
Animate the Digital Crown by bringing it in from the side with a position and opacity animation. Add a bounce to the movement and delay it slightly so it appears after the watch settles. For the band, animate its appearance with a resize from top to bottom, starting from 0% opacity and size.
Make sure the bands are layered behind the watch screen. Add a solid fill to the screen itself so the bands don’t appear behind an empty frame. Organize your layers to keep the animation looking clean and intentional.
Step 8 - Return To The Mobile Device For A Seamless Loop
After the Apple Watch settles, pause for half a second to let the viewer take it in. Then start reversing the animations for the crown and bands. Use the same animations in reverse, with adjusted timing so they disappear naturally. Make sure they don't linger too long - tweak their durations to remove any awkward frames or overlapping visuals.
At around the 11-second mark, begin transforming the screen back into the mobile device. Copy and paste the hold keyframes for size, position, origin, and rotation to this point. Then add your final transformation keyframes to return it to its original phone shape.
Adjust your final timing to about 10.5 seconds if things feel slow. Once everything transitions back to a mobile device, you’ll have a complete, seamless loop.
You can apply this technique to other illustrations 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:
