Creating Cyberpunk 2077 logo animation with GSAP

Hello, in this article I am going to show you how I managed to create a similar logo animation from the video game Cyberpunk 2077 which was one of my favorite games of this year. I really like the futuristic theme of the game and it really encouraged me to create this 😄 .Also I thought this is a great exercise to improve my skills with the Greensock library since I am still a newbie.

Step 1: Creating index.html

(refer the html file on the codepen above)

I gave the page title Cyberpunk 2077 and a div element is created to add the svg logo element. I have imported the CDN library of GSAP to my project, also linked the CSS and Javascript file to my html page which I am about to create in the following steps.

Step 2: Creating main.css

(refer the css file on the codepen above)

All browser defaults(margins and paddings) were set to 0 and the page height was given such that it will take screen height. The content was centered and a background color was given by giving css attributes to the body element. Using the logo class I have made the logo responsive.

Step 3:Creating the app.js and animating the logo

The animation has the following Timeline Structure

The svg file and all the Id's for the svg parts used in the tweens can be found on the Cyberpunk2077.ai file in the link below

Cyberpunk2077.ai

Animating Cyberpunk
(refer the js file in the codepen above)

The word Cyberpunk is animated using the following cyberpunk function in the app.js .

Animating 2077
(refer the js file in the codepen above)

The timeline that animates number 2077 and its background is returned by the n2077 function in the app.js.

Master Timeline
(refer the js file in the codepen above)

A master timeline is created and both timelines returned by the above functions is added to it and initiated.

//Creating the master timeline
var masterTimeline = new TimelineMax();
//adding cyberpunk and n2077 timeline to master timeline and initiating
masterTimeline
    .add(cyberpunk())
    .add(n2077(),'+=0.2');

Usefull Links
Codepen
Github Repo
Greensock Docs

So that's it guys hope you liked this article and thank you very much for reading it. This is my first post on dev I am still trying to get familiar with the platform so if you have any tips/questions regarding the project or the article please be sure to post a comment.