Using color adjustment and filters, I've simulated the iOS spotlight animation. Learn how you can apply these filters at https://proto.io/en/new-features/adjustments-filters/
This prototype show how to re-create the intro animation of the Twitter iOS app where the bird flings out and the feed flings in.
See how it was re-created step-by-step in this webinar video:
http://docs.proto.io/videos/re-creating-bespoke-interactive-animations-with-proto-io-2/
Assets also available to use.
Here is the set of prototypes from the Pro Tips and Tricks webinar:
1) Propagate Events to Items Below
2) Containers as Symbols
3) Conditional Animation
4) Screen Interaction
5) Sketches into Prototype
Here is the video of the webinar:
http://docs.proto.io/videos/pro-tips-tricks/
The video is broken down with time-codes on Vimeo here:
https://vimeo.com/103316955
(under read more)
They are also below. Enjoy...
> Create popover menu with click through to icon below 4:08
> Propagate all events to the item below 4:08
> Using containers as symbols for efficiency (navigation assets etc.) 11:59
> Customizing a navbar component 14:55
> Customize a tabbar component 16:48
> Convert navbar to a container to repeat (as symbol) 19:10
> Convert tabbar to a container to repeat (as symbol) 19:43
> Convert text box to a container to repeat (as symbol) 19:49
> Using a container to create change font style for repeated Titles and labels. 21:55
> Conditional animations triggered by drag gesture using variables (mailbox swipe). 23:04
> Adding containers to canvas 24:44
> Using the draggable gesture 25:25
> Variable Manager 26:00
> Using onDrag variable to change an objects opacity 26:38
> Range of property values that can be changed based on a drag gesture 27:45
> Capturing the X position from dragging an object using a variable 27:57
> Creating a new value if/then argument using shorthand javascript to change opacity using a variable. 29:00
> Creating a callback to the change a property that reads from a variable. 29:52
> Using the onDragEnd gesture 30:33
> Change the Left property using a variable triggered by onDragEnd 30:49
> See range of properties that can be changed from onDragEnd gesture. 31:04
> Using On Screen Show Interaction for creating an automatically cycling carousel. 35:25
> Importing paper sketches (photos of them) to use as background for layering assets and interactions. 40:28
> Toggling between a sketch and your higher fidelity mockup using states. 44:25
> Duplicating interactions between states 45:18