Project using Variables to simulate Drag and Drop to Snap functionality into a predefined area. While also adding Animations and States for a more smooth and elegant process.

A simple implementation of how to simulate a Dynamic List which the user can manually increase or decrease using a single Container, a List component and States.

Airbnb inspiration

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.

I replicate this cool "Switching tabs" animation by talented Jokūbas- https://dribbble.com/shots/1984025-Switching-Tabs For the creation of this animation, I simply used various state transitions.

Zero inbox example using the 'Slide to Delete' pattern

A project which simulates a collision between 2 objects. Freely drag the objects onto each other in order to have their core color change when colliding.

Using variables on a slider to control the Brightness and Hue of a light bulb

A website template with multilevel dropdown menus and scrolling area.

Music player with a slider controlling volume of Music playing.