Join Andy Needham for an in-depth discussion in this video Add the scroll animation, part of Creating a Mobile App Interface in After Effects.
- [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.…
Author
Released
6/6/2016In 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
Skill Level Intermediate
Duration
Views
Related Courses
-
After Effects CC 2013 Essential Training
with Ian Robinson14h 51m Appropriate for all -
Mograph Techniques: Animating with C4D Effectors
with EJ Hassenfratz1h 39m Intermediate -
Mograph Techniques: Spline Dynamics with Cinema 4D
with EJ Hassenfratz1h 13m Intermediate
-
Introduction
-
Welcome34s
-
-
1. App Plan and Pre-Production
-
The app creation33s
-
Sketch out ideas3m 8s
-
Choose the user journey1m 45s
-
-
2. Explore the App Screens
-
3. Prepare Assets for Animation in After Effects
-
Set up and import artwork5m 14s
-
Create reusable components4m 31s
-
Build the Dashboard tiles6m 26s
-
Build the Dashboard screens7m 25s
-
-
4. Animate in After Effects
-
Animate the Steps screen8m 29s
-
Animate the Friends screen7m 50s
-
5. Build and Export the Sequence
-
Export the final sequence4m 45s
-
Conclusion
-
Next steps1m 9s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Add the scroll animation