Adding and editing animation in design should be fun, meaningful, and quick. In this video, join Drew Bridewell as he demonstrates the power of the timeline editor and how it can help you perfect your animations and get you exactly what you want, down to the millisecond.
- [Instructor] When it comes to animating…inside of InVision Studio you have a lot of control.…There's a lot of fun things you can do…and in this example I'm gonna show you…kind of a full end-to-end experience…of using the animation editor to its fullest capacity.…All right, so what I wanna do first…is show you a completed state of this prototype,…and then we're gonna backtrack…and I'm gonna show you how to create it from scratch.…So let's do this.…So I'm gonna click the insnack loading screen.…And again, this is the inSnacks completed…exercise file that you can find.…
So I'm gonna click this.…And then I'm gonna hit the Preview button.…So this is gonna start my preview screen.…So here we have our animation happening.…These are set durations throughout the animations.…And there we go, we got to our landing screen.…So there's also a few other states…where we have these float labels happening.…And we have our hamburger closing…as we click from state to state.…Then we have our Sign In button fade in slowly.…And then when I click this we have our transitions…
Author
Drew Bridewell
Released
9/19/2018- Navigating the interface
- Best practices for importing from Sketch
- Drawing, editing, and formatting shapes
- Managing layers
- Rapid prototyping
- Advanced animation
- Percentage-based scaling
- Creating, adding, and editing components
- Sharing and presenting your work
Skill Level Beginner
Duration
Views
-
Introduction
-
1. A Tour of Studio
-
The welcome window1m 19s
-
The anatomy of a document1m 27s
-
A tour of the interface3m 56s
-
Saving Studio files2m 9s
-
-
2. Importing from Sketch
-
3. Screen Design
-
Managing layers2m 21s
-
Using Boolean operations5m 8s
-
Masking layers2m 5s
-
4. Rapid Prototyping
-
Linking screens1m 58s
-
Previewing your prototype2m 31s
-
-
5. Advanced Animation
-
Using the Motion transition4m 27s
-
-
6. Working with Components
-
Component overrides2m 54s
-
7. Responsive Layout
-
Pinning elements3m 22s
-
-
8. Collaboration
-
Making layers exportable1m 17s
-
-
Conclusion
-
Next steps1m 43s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press 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: Editing animations with the transition editor