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.
Florian Pürschel commented
The time trigger would be amazing. Looping between states would open a lot of new possibilities. Also it would be great if there is a possibility to set a random time trigger with a given span. So there could be an alert with "New notifications" at a random time which has to be dismissed.
mohamed minhaz commented
Not sure about drag trigger. But the time would be helpfull for button scale in/ down effect while clicking, otherwise there have to be a trigger called pressed
Carl И commented
I'm 99% sure they're working on this already, but I want to add a vote and comment just to make sure they know there's demand for this feature
it would be best if we could add key frame animation with timeline to the object or component
Flip Santos commented
Would be great if we had a new time of trigger, based on wait time.
e.g.: Animate element after waiting 0,5 seconds.
That would allow us to make programmable animations, and also would help to deal with resets after some state change.
This would be a real game-changer. Please please please :D
Nathan Wells commented
This would be awesome.
Andrew Eugene commented
Currently, only artboards allow time triggers. Please allow a single object to be animated via time.
The idea is to continue an animation beyond two states without a user interacting with it.
Eg: A button activated by tap continues to animate from state to state without the users intervening.
As a user: I would like a way to introduce an animated component, like showing a "spinning" loader on one artboard that I can then link to another artboard with a timed transition.
So that: I don't have to duplicate several of the same artboards to show an animation (that won't be stuck in a loop).
ie: Design example: Showing a spinning loader for 3 seconds on one artboard, and then linking to a different artboard displaying the loaded results.
Zigmas Mallol commented
This would be so cool to have, this way, with the drag trigger at least we could do some "fake" inner scrolling component.
not to talk more about the possibility to do micro-animations with the time trigger... (But maybe you have your reasons not to do this... memory-wise, or something)
Add the option to use time as a trigger between component states. That way we could do complex looping animations on page.
i think if we can add Time Trigger to components is really good. imagine i want to prototype the insertion point in a search box. what i can do now is to create a new art board and hide the insertion point in first one and make it visible in the second art board , whatever my search box is components but i have to add a new art board for this goal and loop these art boards whit time trigger.
Now imagine we could add Time trigger to component it self. then you can add a lot of async animations in a single art board. that works in many cases not only an insertion point. you can create a lot of components looping through their states whit different life span.
thanks adobe team i love xd :)
Life of에이미 commented
Regarding the slider question, unfortunately We must/ have to link up the same behavior in all the artboards for them to work properly.
Then we should have made a lot of multiple artboards for this dragging/slider effects on the project, Kinda Time consuming and wasting time. and also while we are making those drag /slider trigger, feel a lot of confusion.
Hopefully the Drag trigger will be usable for components.
This is vital for presenting animated button states that take you to the next art-board! It's lame to do a presentation for other professionals where you have to click the button twice (i.e. after the initial tap state simulated the button being tapped) because you only have a "tap" or "drag" state available.
The ability to have a time state that initiates after a tap would solve this problem, allowing you to hover, then tap (causing animation), then it simply transitions to the target board via a few ms of time.
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).