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.

Comments

[Ben Halpern]

This is really cool

[Ishanka D Senevirathne]

Thanks for the feedback, it means a alot 🤗

[Rajitha Gunathilake]

really awesome animation 🔥🔥🔥

[Drew McConville]

diagram was very helpful. may need to do that for my sanity next time i touch gsap.

[Harsh Gaur]

Mind-blowing 🤯

[Ishanka D Senevirathne]

Thanks 👍

[RealToughCandy.io]

Great work -- looks good. Thanks for sharing!

[Ishanka D Senevirathne]

Thanks 😊👍

[Heshan Dissanayake]

I was looking for the cyberpunk animation, this helps me alot. Thanks man!!

[Ishanka D Senevirathne]

Much love 🤗

[Damjan Dimitrov]

Wow, looks amazing! How much time did this take?

[Ishanka D Senevirathne]

Thanks, It took like 2-3 days for me 😅😅

[Damjan Dimitrov]

Thanks. I would like to do something similar but with another logo, is there any specific tutorial you followed?

[Ishanka D Senevirathne]

I didn't follow a specific tutorial most of the transitions are experience from my previous projects. There are many youtube videos to learn basics.After that you can learn through examples, mostly I used projects from codepen and analysed them. Try to recreate them and get used to the library, rest is up to your imagination and creativity. The best way to improve your skill when it comes to animations is through trial and error.

[Wali Ullah]

this is awesome... permission to use this in my Github readme, please? xD

[Ishanka D Senevirathne]

Thanks, permission granted 😄👍