Frame 0 to 26
The Gmail GIF Logo starts with a Yellow (#FCBC05) and Red (#C62220) pen, changing into two columns. The two columns spilt with position property and reshape with path.
I used duplicates of columns with perpendicular blocks for the sticky separation effect. Then I put a Simple Choker effect with 22.00 Choke Matte on them. I also used changed strokes of the connectors over time (100 to 0 for large lines and 75 to 0 for short lines.
The three light black (#3E3E3E) horizontal lines on the back and head of the pen disappear as the columns grow out of them. I set the pen parts (later columns) in a Set Matte effect on them to achieve this.
Frame 26 to 44
The columns reshape into diagonal lines of “M” in the Gmail Logo Gif on either side and meet in the middle. Leaving two columns with the Blue (#4385F5) and Green (#34A853) colors of the Gmail icon.
Frame 44 to 94
The completed Gmail Icon GIF stands still for 31 frames. Then both columns and diagonal lines reshape into the starting pen.
Technical Detail
This Gmail Logo icon after-effects project consists of 21 after-effects shape layers and one null object layer. All the layers are organized, named, and colored without precompose or other objects. These native after-effects shape layers are spline-based. And can be infinitely modified and enlarged like illustrator files.
The frame rate of our Gmail Gif Icon is 50 and has a total of 103 frames (2 Seconds and 2 frames).
This Gmail GIF icon is available as 350px transparent GIF file, 1080px transparent GIF file and after-effects project file.
Feel free to download, customize, change color, resize and mix for your liking. You can also download the after effects file if you’re trying to learn and practice. You use this Gmail Logo After-Effects project without attribution necessity under this license.