How to get the scenenode transition of an object between two artboards

Adobe XD UXP Plugin API
, ,
#1

If you use auto animate to have a scene node or scene nodes fade out in one artboard as it moves to another artboard is it possible to get that transition or interactions?

I found this:

Note: currently, this API excludes all of the document’s keyboard/gamepad, hover, and state-transition interactions.

But some of the interactions have transition information.

 sceneNode.triggeredInteraction: { 
   trigger: { 
      type: 'tap' 
   },
   action: { 
      type: 'goToArtboard',
      destination: Artboard ('Artboard – 2'),
      preserveScrollPosition: false,
      transition: { 
         type: 'dissolve', 
         easing: 'ease-out', 
         duration: 0.3
      }
   }
}
#2

You can get what type of transition that is but only way to tell what has changed is by looking at the scenenodes themselves in those two artboards

#3

From the documentation on interactions:

Currently, this API excludes all of the document’s keyboard/gamepad, hover, and state-transition interactions.

Is there a way to know if an auto animated object is in another artboard? When creating a prototype they say to use the same name.

Maybe a method to check if the scene node is the same:

   var isSameNode = isSameNode(sceneNode, artboard2);
   var changes = getChanges(sceneNode, artboard1, artboard2);

If so I can probably get the state change information given the source and the target artboard.

#4

When it says “state-transition interactions” it’s referring specifically to transitions between component states (a feature added in XD 24 last fall) – it’s not using the word “state” generically. Transitions between entire artboards are officially part of the interactions data plugins can get access to today. I’ll tweak the docs to clarify this.

On your 2nd question – which pairs of nodes are actually going to be animated by an Auto Animate transition? XD doesn’t have an API to tell you that yet. In general: nodes with the same name will get paired up, as long as their parents are also paired. But I believe there are more subtleties to it beyond that, and not all property “diffs” in a node pair are animated yet.

If you want, we could change this post so it’s a feature request that people can vote on – to get an official API to tell you which nodes are animated & how.

1 Like
#5

Yes, please! (Not the original author.)

1 Like
#6

Done! (Someone else beat me to it in fact, I’m not sure who…)

1 Like
#7

Any update on this? My plugin users are asking me about it’s status.

Would it be possible to post the functions used to determine the criteria for transitional elements?