I made the background of the animation white with a slight grey tint around the outside. In addition, I got an image of an iPhone and put my designs inside the phone to make it look more aesthetically pleasing and have it make more sense.
For the intoduction I used the position tool to make the logo and the name of the app to come onto the screen gradually while making it look smooth by using the “easy ease” on the keyframe. The
I used the text tool to create the animation of the name being typed into the phone with key frames. The same was done with the password but instead I used “full stops” and enlarged it to fill more of a gap.
While sliding the pages from side to side, I put 4 white sections which matched the background around the phone so the pages stayed inside the page. I also used the position tool to move the pages using key frames and the same with the side navigation bar.
I used the position tool to make the pin move around the map while using different key frames and speeds to slow down the pin at a certain point to make it seem more realistic and not too robotic by making it all one speed but instead stopping at different key frames and using the easy ease to make it gradually slow down and speed up.
When I made the switch go from black to green, I made two seperate images and layed one ontop of another. I put the opacity to 0 for the seperate layer which was added ontop and when the time was right, i put the opacity to 100 with keyframes while using the easy ease to make it seem more smooth.
I made a seperate animation to create the cursor on the main animation to show where the user was clicking on the page to get around the app.
I first started off by going on the rectangle tool and applying it on the new composition. From there, these were the different steps I did which lead to the final outcome of the cursor animation.