Music Player – After Effects
Help File
Prerequisites
● Compatible with Adobe After Effects CC 2021 and newer versions.
● No external plugins are required.
● Recommended fonts:
– [Link]
(Any modern UI font is suitable.)
Project Overview
The Music Player – Final project allows you to design a modern animated music player UI
including:
● Heading and Sub-Heading scrolling text
● Play / Pause interactive UI
● Previous and Forward button toggles
● Duration playback simulation
● Animated progress bar
● Shuffle and Repeat icons
● Background image placeholder
● Thumbnail placeholder
● Button controls
● BG blur, padding, and roundness controls
The project uses a single Control Panel layer for all adjustments such as text color, icon color,
animation styles, scroll behavior, button toggles, and UI background customization.
Step 1 – Import Your Media
1. Open the After Effects project file.
2. Navigate to the Youtube Music Player – Final composition in the Project Panel.
3. To replace the main background:
● Open the Background Placeholder
● Drag your imported image into the comp
● To Import any media press (ctrl+i or cmd+i)
● Scale it to fill the frame
4. Replace the Thumbnail placeholder by opening that comp and inserting your own
image.
Step 2 – Editing the Text
Editable text layers are marked with comments such as:
● “Edit Text Here & Change Font Style”
These include:
● Heading
● Sub Heading
Double-click the text layer in the Layer panel to modify its content, size, or font.
If scrolling text is enabled, only the visible portion will animate within the masked area.
Step 3 – Using the Control Panel
1. Select the Control Panel layer.
2. Press F3 to open the Effect Controls panel.
Available Controls:
🎨 Text Color Controls
• Heading Text Color – Adjusts the main song title color.
• Sub-Heading Text Color – Adjusts artist/album secondary line.
• Duration Text Color – Changes the timing numbers color.
• Button Text Color – Tint color for button or duration UI labels.
🎨 Icon Color Controls
• Color 1 – Primary icons (Play/Pause, Shuffle, Repeat).
• Color 2 – Secondary highlight color (accent UI).
• Color 3 – Additional tone option for icons.
• Shape Color – Controls the UI button shape fill color.
• BG Color – Background color for the entire player block.
Step 4 – Main Playback Controls
Located in Main Controls / Progress Bar Controls section:
• Play / Pause (Slider) – Toggles playback icon state.
(0 = Pause, 1 = Play)
• Duration (Sec) – Sets the total length of the simulated track.
(This adjusts the progress bar animation.)
• Shapes Scroll – Controls whether UI shapes slide horizontally.
• Previous Icon On/Off – Checkbox to display/hide the previous button.
• Forward Icon On/Off – Checkbox to display/hide the forward button.
Step 5 – Scrolling Title Controls
Located in Scroll Controls:
• Heading Scroll On/Off – Enables marquee animation for the title.
• Sub Heading Scroll On/Off – Enables marquee animation for the subtitle.
• Speed Control – Adjusts scroll animation speed.
Notes:
● When scrolling is off, text remains static.
● Mask layers (Mask 1, Mask 2, Mask 3) define text visibility boundaries.
Step 6 – Animation Controls
Located under Animation Controls:
• Animation Styles – Adjust this dropdown to switch between multiple intro animation styles (3
preset styles available).
• Anim StartAt (Sec) – Adjust this value to control when the animation begins..
• Anim Duration (Sec) – Adjust this value to control how long the animation plays.
• Each Anim Delay (Sec) – Adjust this value to control stagger spacing between animated
elements.
Step 7 – Background UI Controls
Located under Advanced Controls → BG Controls:
• BG Opacity – Adjust transparency of player card.
• BG Roundness – Changes corner radius of the card.
• BG Padding – Adds internal spacing around text/buttons.
• BG Blurriness – Applies Gaussian blur for a glass-like appearance.
Step 8 – Button Background Controls
Located under Button BG Controls:
• Button BG 1 Opacity – Controls opacity for the play button circle.
• Button BG 2 Opacity – Controls opacity for supporting UI buttons.
Step 9 – Drop Shadow Controls
Located in Drop Shadow Controls:
• Shadow Color – Tint for drop shadows.
• Shadow Opacity – Visibility strength.
• Shadow Direction – Angle of the shadow.
• Shadow Distance – Offset of the shadow.
• Shadow Softness – Feather softness.
Step 10 – Global Controls
Located under Global Controls:
• Global Scale – Resizes the entire UI proportionally.
• Global Position (2D) – Moves the UI around the comp.
Step 11 – Editing Button Labels
1. Open the Buttons Placeholder pre-comp in the Project Panel.
2. Inside this pre-comp you will see editable text layers such as Likes Count, Save, Share,
Download, Radio.
3. Double-click any text layer to change the wording, style, or font.
4. The updated labels will automatically reflect in the final composition.
Step 12 – Import Your Music & Sync Playback
1. Import your audio file into After Effects using File → Import → File…
2. Drag the music layer into your Youtube Music Player – Final composition.
3. Select the Control Panel layer.
4. Press F3 to open the Effect Controls panel.
5. Locate the Play / Pause control. This Checkbox lets you simulate music starting and
stopping inside the UI.
6. If you want the music to pause at a specific part, split the audio layer at that frame
using the shortcut Ctrl+Shift+D (Windows) / Cmd+Shift+D (Mac).
7. Place the second part of the audio where you want playback to resume.
8. Add keyframes to the Play / Pause checkbox to match the audio cuts, so the UI visually
switches between play and pause at the correct timing.
Rendering / Export
Transparent Overlay
1. Open the final composition.
2. Press Ctrl+M / Cmd+Ctrl+M.
3. Format → QuickTime – ProRes 4444.
4. Channels → RGB + Alpha.
5. Render.
This allows you to overlay the player design onto video in Premiere, Resolve, etc.
Standard MP4 Export
1. Open the final composition.
2. Press Ctrl+M / Cmd+Ctrl+M.
3. Format → H.264.
4. Render.
Creative Tips
● Increase BG blur for sleek glass-UI designs.
● Use Gradient BG images for premium music visuals.
● Speed up scrolling for long artist names.
● Experiment with Animation Style dropdown for modern motion-graphics feel.
Thank You
🎧✨
Thank you for choosing the Music Player Pack!
Enjoy creating smooth and dynamic music player animations!