Drag and time trigger on components states
Allow drag gestures and time trigger to transition from a component state to another. Now, only tap and hover triggers are available.
The similarity between CSS transitions and the new Component States functionality are so similar. Auto animate only allows for one transition. Real CSS allows for unlimited transitions.
I'm starting to see mico animations like the "Add to cart button" attached. Which could be created using the new component states functionality. But instead of States, think of them as steps in CSS transitions. States A, B and C turn into Transition 1, 2 and 3. You already have easing and timing already developed.
All you would have to do is in Prototype mode allow me to +Add the transition order.
1. create a component instance
2. build all it's states
3. Select new Interaction = Transition Sequence
4. Select Trigger (Hover, Tap, Voice)
5. Action: Auto-Animate
6. Destination: Transition-1
7. Plus Destination: Transition-2
8. Plus Destination: Transition-3
9. and so on, If you set the last one back to the default you could create a looping asset all on one Art Board!
This process would be even easier if XD allowed masking groups of layers with clipping. so you could move elements like this around and saving as a component for reuse. This added feature would also reduce the number of artboards a user would need to work with just to do this one animation.
This would be extremely useful for toast messages, etc. that animate on-screen, then back off without user interaction.
Christian Stengel commented
This would be helpful for designing more specific micro interactions for buttons which changes their appearances etc. Would make a prototype way more realistic and give a better feel to the usage of time to it.
This is a key feature!
Barbaro Barroso commented
Totally agree with you, it is a feature that would be very useful when creating animated compositions within the same XD. Hopefully it will be incorporated in next year's versions.
Gerard McComish commented
Yes. This makes so much sense. Especially adding a time delay. You could effectively create animated components (movie-clips).
I totally agree, we need timed states urgently :)
Should be related to https://adobexd.uservoice.com/forums/353007-adobe-xd-feature-requests/suggestions/38959951-drag-and-time-trigger-on-components-states but yes I would like this feature too.
Lucas Matos commented
Sliders are another use.
Timed interaction (changing state based on time, just like you can with artboards) would be helpful in many different cases as well. It could be used for continuous animation loops, adding "extra keyframes" in the transition between states as well as the obvious simulation of state changes that normally take time (saving/erasing/exporting/uploading).
Alex H commented
Yes! Timed transitions are very important for simulating loading states and interactions between an app or website and the server to simulate loading.
No other available interaction makes sense for something like this.
I just want a 3 second delay and then have it transition to the success or error state.
Yes, i need this. I need to be able to simulate a loading state of a component without having to hack this with another copied canvas where i show the animation.
Lucas Matos commented
Add timer trigger to interaction easy simulation of non permanent states like: saving, erasing, exporting...
Lewis Cannon commented
I'm really surprised that this wasn't included in the component states when it was released. I know triggering a timed transition is a hassle in the default board to board method. (Bad UX design there...) But this feature would be super duper useful! Hopefully it comes soon. :)
mike Amerson commented
It would be nice to create different states of an individual component that can be transitioned in sequence, to create an animation.
For example, if i want a button to pulse a glowing effect, I would create a component that looks like a button and then duplicate it and adjust it to look like a glowy button, and then link the two so that they transition back and forth into a loopable animation.
it would be great if you expand the States of component not only for Hover or Tap, but also a simple Loop Animation... Here is the tutorial of what I mean -> https://www.youtube.com/watch?v=Ev3fSi7P66c
And the video below is an actual prototype I'm working at of wayfinding in the museum, where animated arrow shows you the way...
For now I can achieve this effect only between 2 different artboards... But it would be really cool if the component in some way had a "loop" auto-animate option between states... ?
And hey, this could be the beginning of making gifis directly in XD... ? which would be AWESOOOOOOOOOME! ?Thank you ?