How To Animate A Toggle Switch
Duration: 18:00
Learn how to animate a toggle switch in SVGator.
Step 1 - Animate The Background Color
Start by animating the background from yellow to purple. Go to around 0.6 seconds on your timeline and add a fill color animation. Paste your purple hex code there. Hold that value until around 2 seconds. Then go back to yellow by copying the first keyframe and pasting it at the end. You can choose slightly different shades if you prefer.
Change the interpolation from linear to Ease In Out Quart for a smoother look. This easing starts slow, speeds up in the middle, and slows down again at the end.
Step 2 - Move The Toggle
Now animate the toggle’s movement from left to right. Select your entire toggle folder and add a position animation. Go to the same 0.6 second mark and move the toggle all the way to the right. Hold the position, then paste the first keyframe later to return to the original spot. Use the same easing you used for the background so both transitions feel connected.
Step 3 - Change The Toggle Shadow
Next update the pill shape behind the toggle to match the color transition. Add a fill color animation. At 0.6 seconds, change the fill to a shade of purple that works well as a shadow. Adjust the yellow to something more neutral like white. Choose darker shades for the shadow that follows the toggle. Copy and paste the starting and ending keyframes to hold and loop the effect. Make sure the shadow feels like it follows the toggle correctly.
Step 4 - Make The Sun Rays Disappear
Animate the sun rays next. Pick one of the nine lines and add three animations: stroke color, stroke width, and stroke offset. Change the color from yellow to purple. Set stroke width to go from its value (for example 3.55) to 0. For offset, calculate the full length of the stroke (for example 3.64) and use that to hide the stroke completely. Then return all values to their original state to make a loop.
Apply the same easing as before to keep things smooth. Once that’s done, copy all the keyframes from the one line and paste them onto the remaining eight. This saves time and makes sure all rays animate the same way.
Step 5 - Fade Out The Rays Group
Now fade out the entire sun rays folder. Add an opacity animation going from 100 percent to 0, hold it, then return to 100. This makes sure the rays not only shrink but also disappear fully before the moon appears.
Step 6 - Transform The Sun Into A Moon
To turn the sun into a moon, use the "sun to moon" layer. This small invisible layer will act as a mask. Select it and animate the scale to around 1.3 at 0.6 seconds. Add a slight position shift to help create the moon shape. Then adjust the size of the original sun circle so the new moon shape fits better in the toggle area.
Now select the mask and animate its scale too. Set it to around 1.5 and hold the values just like before. Then add a rotation animation to the moon shape. Rotate it slightly to give it a different feel from the sun. Copy and paste keyframes to create the return movement and loop.
Step 7 - Change The Moon Color
Now change the sun’s fill color to match the new mode. Select the main circle and add a fill color animation. At 0.6 seconds, change the fill to purple. Paste the starting and return keyframes as usual to complete the loop. Apply the same easing to keep the movement consistent.
Step 8 - Sync And Test The Animation
Make sure all keyframes across layers happen at the same time. Everything should peak at 0.6 seconds and return by 2 to 2.5 seconds. If something looks off, copy working keyframes from other elements and paste them where needed. This keeps all movements aligned and looping smoothly.
Step 9 - Refine And Experiment
Now that the animation works, experiment with different easings, timing, and colors. You can change the look or add more effects if you want.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:
