Complex interactions builder - Mouse, Scroll and infinite animations
It can be great to be able to prototype complex animations and interactions. It can help us create more concrete prototypes with mouse and scroll animations or also infinite loop animations.
Detail of the idea in this article : https://uxplanet.org/the-killer-feature-im-waiting-for-in-our-modern-design-tools-87c3a5d3c4b3
Summary of the idea :
A 3 step process which allow you an infinity of possibilities by customizing each property with a math formula. We add syntax highlighting to help designers differentiate dynamic properties, static properties and constants or math functions.
Then, AdobeXD previewer will “just” have to recalculate and update these properties at a 60 Hz frequency to make our animations alive.
We can image some subfeatures to make this tool more powerful :
Autocompletion (like code editors) to help designers find the available properties to play with and the math functions they can use
A predefined animations library to help designers taking in hands this new feature before diving into custom formulas
The possibility to use other elements properties values as variables to create more complex animation (for exemple : use the current x position of a card to determine the opacity of its content)
Built-in easing functions we can use in our math formulas to help us create smooth interactions (yes, easing is also math)
The ability to work with more complex properties like colors, 3D rotation or 3D translation. All these properties have subcomponents, therefore we can define a formula for each subcomponent as below