I like the Auto-Animate feature, but I'm having a small problem that I can't solve.
In my prototype for an iPhone Xs app, I have a few cards for blog posts on my home screen. I created separate artboards for every post which contain the same elements as the cards. The elements have different styles and positions on the single-post artboards, which creates an excellent opportunity for Auto-Animate. And in fact, everything works pretty well as long as you don't scroll.
And that's the problem. When I scroll down on my home artboard and then click the card to get to the full post, all elements are being animated as expected, but XD doesn't scroll to the top of the artboard – even though my image element from the card is on the top in my single-post artboard. What happens is that XD preserves the scroll position between artboards and there's no option to change this behavior for Auto-Animate afaik.
Here's the prototype: Adobe XD CC
Click on the first post – everything is perfect.
Scroll down and click on the second to fourth post – XD doesn't scroll to the top of the single-post artboard.
Am I doing something wrong or is this just a missing feature?
Copy link to clipboard
I'm not sure if there's an easy solution for this scenario, but what happens if you set the full post Artboard height to the viewport height (i.e. non-scrolling)?
Yeah, that would work. But it doesn't make sense as the blog post is longer (i.e. taller) than the viewport. Ergo it's not really the solution I'm looking for.
Then you would link the viewport-height blog post Artboard to the full-length blog post Artboard, using Time as the trigger.
I'm not sure if I understand. I can't link the entire first artboard because it contains several cards for blog post which have to be linked to entirely different artboards. Therefore, time isn't even an option. Have you had a look at my prototype?
What I mean is:
Home screen → Auto-animate → Blog Post (truncated at viewport height) → Time → Blog Post (full length)
This technique itself works well, however auto-animate is not suited for scrolled content (e.g. your blog post #1 is fine but not good for #4).
I'd consider scrolling the blog list first before applying auto-animate (or use different transition). I made a quick demo so you can see what I mean: Adobe XD CC (I did only blog post #4 whale)
Thanks, this was helpful. Although not exactly what I was looking for – and I hope it won't be the long-term solution –, this seems to be the best workaround for now.
I was stuck with the same problem too as I got different heights of the artboards and it will not go to the top of each dartboard when I start scrolling. I ended up have to get rid of the Auto-animate which is pretty disappointing! I hope Adobe will add a checkbox for "keep scrolling position" option. Uncheck it will always start with the top of the artboard.