How To Create A Line Animation with Neon Light Effects
Duration: 04:30
Step 1 - Create The Base Controller Design
You begin by drawing the silhouette of the controller. Once the main outline is complete, add the buttons and remaining details using simple geometric shapes. Make sure that every element in the design uses a 15-pixel stroke size.
Step 2 - Prepare Static And Animated Strokes
The strokes currently visible will remain static in the background. To create the neon effect, duplicate each stroke individually. These duplicated strokes will be the only ones you animate, while the original strokes stay untouched.
Step 3 - Animate The First Neon Line
Start with the purple line. After duplicating it, change its color to blue and reduce the stroke size from 15 pixels to 10 pixels. Next, apply a Stroke Offset animator to this line. As soon as the animator is added, a keyframe appears at the current playhead position. Copy the Offset & Dashes values, move the playhead forward to 1.6 seconds on the timeline, add another keyframe, and change the Offset value to 0.
Step 4 - Add Color Variations And Timing Offsets
Duplicate this newly animated blue line and change only its color. To create a layered neon glow, shift this duplicate forward on the timeline so it begins slightly after the blue line. Then, duplicate the pink line, move it forward in time as well, change its color to white, and reduce the stroke size to 5 pixels.
Step 5 - Organize And Rename Layers
Rename the layers so they are easy to identify. Take note of which layers are animated, since later you will separate animated layers from static ones into different groups.
Step 6 - Apply The Method To Other Shapes
Repeat the same process for the remaining shapes. Duplicate each layer, add a Stroke Offset animation, copy the values into Offset & Dashes, set the offset to 0 at the end of the animation, lighten the color, and reduce the stroke size to 10 pixels.
Step 7 - Adjust Stroke And Enhance The Glow
Change the stroke caps to rounded. Duplicate the line once more, change its color to white, and reduce the stroke size to 5 pixels. For the white line, extend its animation duration on the timeline so it animates more slowly.
Step 8 - Duplicate And Position Animated Layers
Rename the layers again, duplicate the animated ones, and move these duplicates to the right side of the composition. Continue using this same workflow for all remaining shapes in the design, repeating the process until every part of the controller has a completed neon animation.
Step 9 - Arrange Static And Animated Layers
Once the animation is finished, select all the static layers and place them below the animated layers in the layer stack.
Step 10 - Loop The Animation
Group all the animated layers together. Add an Opacity animator to this group at the end of the timeline and set the final opacity value to 0.
Step 11 - Create The Background Glow
Finally, group the remaining static layers. Duplicate this group and apply a Blur filter to it, setting the Spread value to 20. Duplicate the blurred background once more. With these final touches, the neon controller animation is complete and glowing vibrantly.
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!
