DEV Community

Cover image for Creating Cyberpunk 2077 logo animation with GSAP
Ishanka D Senevirathne
Ishanka D Senevirathne

Posted on • Updated on

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

Timeline Hierachy

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');
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (16)

Collapse
 
ben profile image
Ben Halpern

This is really cool

Collapse
 
ishankadsenevirathne profile image
Ishanka D Senevirathne

Thanks for the feedback, it means a alot ๐Ÿค—

Collapse
 
rizkyrajitha profile image
Rajitha Gunathilake

really awesome animation ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ

Collapse
 
drew_mc profile image
Drew McConville

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

Collapse
 
iharshgaur profile image
Harsh Gaur

Mind-blowing ๐Ÿคฏ

Collapse
 
ishankadsenevirathne profile image
Ishanka D Senevirathne

Thanks ๐Ÿ‘

Collapse
 
realtoughcandy profile image
RealToughCandy.io

Great work -- looks good. Thanks for sharing!

Collapse
 
ishankadsenevirathne profile image
Ishanka D Senevirathne

Thanks ๐Ÿ˜Š๐Ÿ‘

Collapse
 
heshandissanayake profile image
Heshan Dissanayake

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

Collapse
 
ishankadsenevirathne profile image
Ishanka D Senevirathne

Much love ๐Ÿค—

Collapse
 
damjand profile image
Damjan Dimitrov

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

Collapse
 
ishankadsenevirathne profile image
Ishanka D Senevirathne

Thanks, It took like 2-3 days for me ๐Ÿ˜…๐Ÿ˜…

Collapse
 
damjand profile image
Damjan Dimitrov

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

Thread Thread
 
ishankadsenevirathne profile image
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.

Collapse
 
saberglow profile image
Wali Ullah

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

Collapse
 
ishankadsenevirathne profile image
Ishanka D Senevirathne

Thanks, permission granted ๐Ÿ˜„๐Ÿ‘