APPLICATION DESIGN II - LECTURE

-

03/05/2023
Hansel Ribowo/BDCM
App Design II
Lecture

Lecture

In this week we learning how to animate our website. We start by learning how to use Gsap website to help us with the animation of the website,


Then we try to animate our website logo by using script that we copy from Gsap. First we need to load Gsap into HTML page we need to add script in visual studio code which is this


After adding the script now we can add the animation from Gsap, our lecture want us to the animation for the logo so this the code for the animation


First we need to add id to the logo.


and then add the Gsap at the java script section.


This one is for adding ease in/out for the animation


After that, we added some animation delay to make it come one by one.


This animation for the side panel that when we press it will show the menu to animate the section we need to add the animation when open and close the panel.

now we making the main logo to show first and then continue to the main page like when opening mobile app


This is to make the logo and adding main container id to the main page.


This is the CSS for the logo screen and the main container.


This is the java script code for the animation.


This week we learn about adding a timeline to the animation so the animation will be showing 1 by 1 without adding delay to the script.

after that we also using the timeline for the side panel animation.
now we use t2.reverse to do the close panel when clicking the panel again.

After that we learn about how to go to second page by pressing profile image, first we making the second page first after that were do the script by making function loadpage2 and gotopage2. in the gotopage2 is to reverse the animation for the transaction, and loadpage2 for load the second page to appear. Also add onClick function to the profile image.




Next we learn about adding svg files into the coding, with Adobe Illustrator. The coding will show when you save as SVG and then show the code in Illustrator.

After that we do animation to each layer of the SVG with gsap.









Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT - FINAL YEAR PROJECT

-
Image
23/04/2024 - 02/08/2024 Hansel Ribowo/0350008/BDCM Major Project Final Year Project Proposal From the first week until week 3 we need to come up with an idea to solve a problem that exists and the solution must not already be available in the market, to help us come up with an idea our lecturer gave us choices Look at the Dissertation Topic Find an actual live brief (client) - has to be approved Find any topic Find the purpose of the project Who benefits from the project What problems are we solving? (Doesn't have to be too simple, Blue Ocean strategy). After our idea gets approved by our lecturer we need to make a proposal about the idea that we want to make to solve the problem, do research about the problem, mood board, sketch, and high fidality. Final Year Project Proposal by Hansel Ribowo So this is the proposal and all the outcomes for my final...
Read more

APPLICATION DESIGN II - EXERCISE 1

-
Image
12/04/2023 Hansel Ribowo / 0350008 BDCM (UI/UX) Application Design II - Exercise 1 Exercises In this first week, Mr. Razif explains to us about MIB and what task and project we will do this semester after that we learn how to use Chat GPT to make a website after that Mr. Razif asks us to do some exercises which make a website using Chat GPT. Here my website uses Chat GPT Fig 1.1 Home Page Fig 1.2 About Page Fig 1.3 Portfolio Page Fig 1.4 Contact Page Fig 1.5 HTML Coding in Visual Studio Code Fig 1.5 HTML Coding in Visual Studio Code Fig  1.6 CSS Coding in Visual Studio Code Fig  1.7 CSS Coding in Visual Studio Code Fig  1.8 CSS Coding in Visual Studio Code ...
Read more