Highlighted

Why does Auto-Animate preserve the Scroll Position between Artboards?

New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

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?

Thanks.

Adobe Community Professional
Correct answer by kennethkawamoto2 | Adobe Community Professional

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)

Views

1.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Why does Auto-Animate preserve the Scroll Position between Artboards?

New Here ,
Jan 30, 2019

Copy link to clipboard

Copied

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?

Thanks.

Adobe Community Professional
Correct answer by kennethkawamoto2 | Adobe Community Professional

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)

Views

1.3K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jan 31, 2019

Copy link to clipboard

Copied

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)?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 31, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 31, 2019

Copy link to clipboard

Copied

Then you would link the viewport-height blog post Artboard to the full-length blog post Artboard, using Time as the trigger.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Jan 31, 2019

Copy link to clipboard

Copied

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?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Feb 01, 2019

Copy link to clipboard

Copied

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
Feb 02, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
New Here ,
May 23, 2019

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...