Motion doesn't always involve moving stuff from here to there. Sometimes, an animation may include a pulsing or spinning icon. This video shows you how to create repeating animations using the Repeat Animation patch.
Author
Tom Green
Released
12/7/2017
Developed by the designers at Facebook, Origami Studio is a free UX prototyping tool designed to bring your mobile and web project ideas to life. Join Tom Green as he shows how to create interactive prototypes that work on smartphones, tablets, and desktop computers with Origami. First, learn the fundamentals of using Origami Studio layers and its unique system of patches—plug-and-play components for quickly adding interaction, animation, and behavior to your prototypes. From there you can learn how to add Photoshop, Sketch, and Illustrator content to your Origami Studio project and add interactivity, rich media, and motion. Then discover how to apply what you have learned to create a delightful variety of interactive prototypes and discover how to preview and test those prototypes on your devices.
Topics include:
- Using patches
- Importing content
- Working with shapes and masks
- Create scrollable components
- Creating motion and animation
- Using loops
- Adding media and effects
- Testing your prototypes
- Sharing your project
Skill Level Beginner
3h 35m
Duration
20,416
Views
Show More
Show Less
-
Introduction
-
Welcome2m 49s
-
Exercise files1m 18s
-
-
1. The Origami Studio Interface
-
Interface6m 21s
-
Target devices3m 5s
-
Viewer4m 38s
-
Layers4m
-
Properties4m 57s
-
Patches4m 6s
-
More patches3m 59s
-
Screens2m 27s
-
-
2. Working with Patches
-
Patch3m 51s
-
Multiple patches6m 16s
-
Long press4m 59s
-
A ripple effect5m 5s
-
Logic7m 54s
-
Multiple interaction5m 15s
-
-
3. Importing Content and Working with Shapes
-
4. Scrolling Content
-
Vertical scrolling5m 27s
-
Horizontal scrolling9m 52s
-
-
5. Animation
-
Classic animation4m 17s
-
Pop animation8m 24s
-
Animate a hamburger menu8m 52s
-
Repeating animation4m 45s
-
Timed animation4m 29s
-
-
6. Creating and Using Loops
-
Simple loop8m 1s
-
More loops2m 58s
-
Interactive loops4m 31s
-
JSON6m 29s
-
-
7. Media and Effects
-
Audio3m 45s
-
Import video4m 37s
-
Video layer6m 9s
-
Time and duration3m 47s
-
Sliders5m 21s
-
Progress ring4m 38s
-
Particle4m 43s
-
-
8. Device Testing and Sharings
-
Device testing iOS1m 32s
-
Device testing Android3m 8s
-
Share and export3m 8s
-
-
Conclusion
-
Next steps2m 49s
-
Show MoreShow Less
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: Repeating animation