Animate individual elements separately (custom animation transitions / microinteractions)
Support for simple animation.
Example: Show/hide a slide or push menu
This would enhance a demo and engage prospects that are familar with common application patterns.
Peter DiBartolo
shared this idea
Reopening the feature request, based on feedback.
405 comments
-
carl max
commented
I think your suggestion is great. I don’t know if you can provide some suggestions for my website, I can pay you some compensation.
My web：https://www.cnsylphy.com/ -
John henry
commented
Without getting too buried in the subtleties of an expert timetable, there's GOTTA be an approach to just choose which component goes ahead first.
Like, whichever text box/gfx is on top gets the saint treatment. (Rather than which is greater, which is what it is by all accounts now...? Which is REALLY irritating) https://rhotels.ae/en/the-retreat-palm-dubai-mgallery-by-sofitel.html
-
Steven Mancera
commented
Hey Demian, consider a Timeline view based Interaction Design UI with this. Where we can have easy Properties changes on each Keyframes.
Just like on After Effects and InVision Studio (look for it for inspirations)
-
Noi
commented
Without getting too mired in the details of a professional timeline, there's GOTTA be a way to simply select which element comes on first.
Like, whichever text box/gfx is on top gets the hero treatment. (Instead of which is bigger, which is what it seems to be now...? Which is REALLY annoying)
-
Adding the TIME trigger to animate between states within a component. This would reduce the need for multiple artboards to animate elements like loaders, progress bars, and all that good stuff.
-
Andrew Hart
commented
This would be nice. I would suggest that this is implemented by adding a Time action to trigger s state change. State change already has auto animate so allowing a state change for an element triggered by a Time event achieves the required feature in a more general way
-
Farshad Sadri
commented
That's a definite YES feature. I hope XD dev team implement it in near future. This feature alone can add so much functionality to prototypes that stakeholders can mistaken it with the finished product indeed!
-
Anonymous
commented
For a start custom easing curves would help A LOT!
-
Boiba
commented
Just copy Principle and be done with it.
-
Hourless
commented
System may be so simple...give us ability to set delays for individual elements so auto-animate may consider them...that would be great.
-
gue
commented
Is this ever going to be implemented as the feature is under review for 2 years (!) now?
-
Bianca Vela commented
It will be great if this could work like smart objects in photoshop. I mean creating this animations no matter how many artboards, export the file as a component or something and link it back into a project in Xd, if changes are needed we can edit the linked file (just like smart objects or linked files in InDesign), this could open the possibility to trigger animations when they scroll into view, by tap, etc in only one artboard.
-
Preston
commented
Not sure if I'm asking for the same thing or not, but when I make an auto-animated state of a component, I can't then make that a trigger to change pages or something. Example: Animated hamburger menu.
-
Madafaka Damesqlo
commented
This feauture is a MUST! we lack of animation possibilities
The same timeline system like adobe flash of after effects
1) Animations inside a moviclip/compositions (moviclips like flash or compositions like after effects)
This way we can make small loop animations of elements that can be trigger2) General timeline animations for all the elements just like invision studio has, so we can use smart animations or timeline animations.
3) Animation trigger/controllers on the timeline like Adobe flash (play/stop/change scene WIHTOUT ACTION SCRIPT)
This way we can decide when to play the animation or stop the animation in that screen of the prototype
e.g. Start the prototype, the animation plays, when the animation reach frame 60 stop (so it doesnt loop) and change the scene, so it will play a smart animation/transition to next scene -
Chris
commented
Animate elements as soon as they scroll into view
-
Chris
commented
I think protopie would be another great app to look for an example of some of the microinteractions that can be done. Right now, you have to import it into there to be able to do this level of animation.
-
Anonymous
commented
+1
-
gue
commented
Just take a look at proto.io. I think they tackled component states and animations in a way that cannot be done better. Waiting for this feature to come now ever since Adobe XD launched, I really don't understand why the mentioned tool is the ONLY ONE of all the UX tools out there that has such a feature. As a UI designer I don't want to copy-paste or even recreate the whole view just because of a simple state change / animation whatsoever.
-
Henrik
commented
Can you please change "Snap" easing property name to something that is widely known or a market standard. e.g Spring. There is no such equivelant in CSS or UIViewanimation in Xcode. Otherwise you will be blackboxing XD.
Also please display transition and animationspeed and other details in Design Spec mode for a much better hand-off experience.
-
Matza
commented
Because of lack of enough canvas size, this should be implemented to limit artboard amount (because one animation needs several duplicated artboards …)
