This Animated navigation bar project was created to simulate feedback when interacting with a button on a navigation bar while also giving it some snap functionality. Was created using Containers and States.

Type the first character of topics from http://uxofvr.com to see the auto-complete. (a-z, 2,3). Use ESC to hide the dropdown. Uses a variable to capture the content of the search field then uses the javascript method "{search}".charAt(0) to capture the first character of the search string to then change the container state property of the auto-complete dropdown to match the first character typed. see video of how to create this step-by-step in the webinar: https://support.proto.io/hc/en-us/articles/115001243532-Model-advanced-prototypes-that-use-variables TAGS: auto-complete search dropdown variables variable character selection Thanks to Costas Thoma for the model.

A website template with multilevel dropdown menus and scrolling area.

This Splash screen prototype shows a vector animation of a headphone made in After Effects. Use the Bodymovin plugin that exports a JSON file and can be dropped right into Proto.io.

Drag and Drop an avatar over a target area that animates when in the drop zone. When released outside the target drop zone, it returns to the original location. Uses a variable to define the target drop zone, that then triggers animations in the zone and when dropped. See how it was made step by step in the webinar video: https://support.proto.io/hc/en-us/articles/115000637591-Advanced-Scrolling-Dragging TAGS: drag and drop dragging variables variable animations on drop animation

A 3D Interactive Walkthrough of a space using the Proto.io VR Component. Using gaze click interactions you can transition from one 360° scene to another. Import this fully editable project into your Proto.io account to create your own 3D interactive walkthrough.

A simple animated Flowchart. Click on each tab and the arrows when zoomed in to transition to the next one. Design credited to: https://www.sketchappsources.com/free-source/3636-entity-relationship-model-erd-diagram-library-sketch-frebie-resource.html

An animation of our Solar System

Hit Refresh icon to see a loading animation for bringing new email. Swipe left on the top latest email to delete. (Inspired from http://www.beautifulinterfaces.com/item/114-covert-inbox)