Join Andy Needham for an in-depth discussion in this video Add the scroll animation, part of After Effects: Creating a Mobile App Interface.
- View Offline
- [Voiceover] We're now going to add scrolling animation…to the step screen.…It also includes swipe interactions,…and then bring it into our main sequence.…I've set up my projects so that I got a bit more room,…I've closed down some panels that I didn't need,…and I've got the steps composition open already.…So the first thing I want to do,…is precompose a lot of these layers,…so it's easier to work with.…So, I'm going to maximize this layer panel,…and then select all of these layers here,…and precompose them; I'll call it "Steps Data".…
Now we have our chart, "Steps Data",…and some other elements.…Just scroll through, see what we got.…What we want to do, is scroll this element so the…"Steps Data"--if we just scroll up we want to mask it out…so that it's hidden.…So what we'll do is just undo that,…make it new, solid, make it Comp Size,…and we already have a matte layer…so I'll just call it "Mask".…
Now then, let's hide it, see where we want to add "Mask",…around about here, let's say.…Just see what I've got.…Okay, around about there.…
In this course, Andy Needham shows how to create an app interface from scratch using Adobe Illustrator, and then take the finished design into After Effects for animation. This is a start-to-finish project, going from concept sketches to the final product (an animated GIF). The prototype will showcase the navigation and interactive aspects of the app interface and can be used for marketing or gathering client and user feedback.
- Sketching ideas
- Planning ahead: knowing your target output
- Designing screens in Illustrator
- Preparing artwork for After Effects
- Creating reusable components
- Building and animating screens
- Adding transitions and gesture animations
- Exporting the final sequence as an animated GIF