How To Create A Glass Reflection Animation
Duration: 25:47
Learn how to create a glass reflection animation in SVGator.
Step 1 – Setting Up The Scene
Before starting any animation, review the folders in your scene. You have a background layer that will stay static. The blue podium should also remain locked. Keep the shadow layer locked for now. Focus on the glasses folder, which contains all the key elements.
Step 2 – Animating The Position And Scale
Open the lenses group to begin creating the rotation illusion. Add a position animation to the entire lenses folder. At one second, move the lenses slightly to the left. At two seconds, copy and paste the first keyframe, and at three seconds, move them to the right. To enhance the illusion of depth, add a scale animation. At one second, reduce the scale from 1 to 0.9, copy the keyframe at two seconds, and repeat 0.9 at three seconds.
Step 3 – Adjusting Reflections Inside The Lenses
Inside each lens folder, open the mask and locate the two rectangles that create the reflections.
On the right lens, add a position animation at zero seconds, then at one second, move both rectangles toward the right. Add a size animation to make the reflections thinner as they move.Adjust their positions so they remain evenly spaced, then at three seconds, move them off frame. Repeat these same steps for the left lens, mirroring the direction of movement so both sides match.
Step 4 – Animating The Lens Highlights
Now work on the highlight layers for both lenses. On the left highlight, add an opacity animation, setting it to 100 percent at one second and back to zero at two seconds. Apply an easing curve to make it feel smoother. Then add rotation and position animations to move the highlight across to the opposite side of the lens. Keep its opacity at zero until it reaches the correct position so the transition is hidden. Once the animation looks right, copy the left highlight and use it for the right lens.
Step 5 – Refining The Lens Scaling And Perspective
Scale each lens individually instead of the entire lenses folder. Add a scale animation to both the left and right lenses. Copy the first keyframe to two seconds, then at one second, reduce the scale to 0.9.
Step 6 – Connecting The Bridge Between The Lenses
Select the bridge that connects the two lenses. Add a morph animation and copy the initial keyframe to two seconds. Use the node tool to move the bridge endpoints so they align with the edges of the lenses at one and three seconds.
Step 7 – Animating The Nose Pads
Locate the nose pads inside each lens folder. On the right pad, add both position and scale animations. Copy the first keyframe to two seconds, then at one second, increase the scale from 0.45 to 1 and move it slightly to the right. Repeat this for the left pad, but move it in the opposite direction.
Step 8 – Shaping The Arms Of The Sunglasses
Open the frames folder and focus on frame left and frame right. Add a morph animation to frame right. At one second, use the node tool to extend the outer nodes outward while keeping the inner edges attached to the lenses. Do the same for frame left but in the opposite direction. At three seconds, reverse the morphs so the arms return to their starting length.
Step 9 – Animating The Shadow
Unlock the shadow layer and set its opacity to 100 percent. Add a morph animation and copy the initial keyframe to two seconds. Move its nodes so the shadow shape follows the rotation of the glasses, slightly widening or shifting as needed. Mirror these changes at three seconds to complete the cycle. Reduce the shadow opacity back to about 10 percent. 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!
Tutorials to help you out:
