How to Create an endless background scroll animation in XD?

Community Beginner ,
Mar 13, 2022 Mar 13, 2022

Copy link to clipboard

Copied

Hey Everyone,

 

I've been looking for a few days online and trying various methods but have had to bite the bullet and ask for help. I am not sure this is possible but i am trying to create an endless mountainous range with parallax scrolling, similar to one you might see gazing out a car window. I'm only using 3 layers of parallax shapes to achieve the effect but i'm having difficulty working out the animation logic to create a simple loop.

Auto-animate always moves my mountain objects back to the starting X co-ordinate when using the prototype tool to complete the loop back to home page, meaning the animation goes backwards at that point.

 

Aside for expanding my grid group and repeating the mountain range a million times so it never runs out, i cannot figure out the correct way to achieve this. Any XD Xperts on here willing to share their troubleshooting tips? i'd be very eager to hear. Thanks in advanced.

 

<Title renamed by moderator>

TOPICS
How to

Views

526

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
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Mar 14, 2022 Mar 14, 2022
Oh thanks for your kind words Tom! Yes, it took me a while too, I also thought  that it must be possible but couldn't tell how so started trying and found getting lucky lol. Oh for recording a video of prototype in XD you can check https://helpx.adobe.com/xd/help/preview-designs-and-prototypes.html While replying to challenges people ask about I've been having great tutorial ideas actually, great, I'll update here if I prepare a tutorial for a continuous animation, happy designing! 

Likes

Translate

Translate
Adobe Community Professional ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

Hi @Tom23569230ym17, since XD supports videos perfectly, I think I'd try creating mountain animation in its own artboards and exporting it as a video and then importing back that video in my XD file (and select the "loop" option under the video playback options) If you try it or already tried it please update us here, hope this helps 🙂

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
community guidelines
Community Beginner ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

I was also thinking to do something similar, but wouldn't a video have issues with resizing over an animation?

I will try it now, however if anyone can explain how to do the animation then i would be grateful as i think its something i'd use time and again.

 

Will post result asap. Thanks Akin!

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
community guidelines
Adobe Community Professional ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

Hmm, making the video's artboard in the same width with your design's artboard should help.

Update: Actually, with just two artboards, creating a symmetrical mountain set/row (of course I cloned the very first mountain as the last one, instead of a reflected one to have the exact same one in the first artboard,since the animation needs to end in the look it began, as you understood) you can create close-to-seamless effect, the trick is in the second/last artboard instead of auto animate, selecting the transition with 0 second delay and connecting it to the first artboard. Here's the prototype link: https://xd.adobe.com/view/1b5ff0f9-79d3-4de9-ba23-c50c987db1ac-4e0c/

and the XD file: https://www.dropbox.com/s/6n8ddm5gzkslmwu/bg-animation-loop.xd?dl=0

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
community guidelines
Community Beginner ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

YES! that's what i wanted to do, you're a genius. I thought it was something like that but couldn't get my head around it.

Also this is very handy as i've just spent an hour trying to figure out how to export video from XD artboard, so if you can provide a link to such a tutorial or steps to do this, i think that will benefit others reading this thread.

 

Thanks again Akin great work!

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
community guidelines
Adobe Community Professional ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

Oh thanks for your kind words Tom! Yes, it took me a while too, I also thought  that it must be possible but couldn't tell how so started trying and found getting lucky lol. Oh for recording a video of prototype in XD you can check https://helpx.adobe.com/xd/help/preview-designs-and-prototypes.html While replying to challenges people ask about I've been having great tutorial ideas actually, great, I'll update here if I prepare a tutorial for a continuous animation, happy designing! 

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
community guidelines
Community Beginner ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

Thank you dude your time is much appreciated.

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
community guidelines
Community Beginner ,
Mar 16, 2022 Mar 16, 2022

Copy link to clipboard

Copied

Just to add for anyone else following this thread.

 

I have expereinced a noticeable delay when my animation loops using the method outlined above by Akin. I think it would be helpfulk to share Akin's thoughts on this for anyone thats following:

 

quote

I can see what you're saying about the delay, even in th eexample I did there's a slight delay (even though I made sure the transition and delay have 0 seconds set) And the inability to scroll and using the nav makes it not an option for such an animation, I suggest using a video or lottie animation ( https://lottiefiles.com/ and if you're not familiar with it you can check Howard's great tutorial about it https://www.youtube.com/watch?v=d8mw3_ihsVA ) for that effect. This method in XD could be a nice way to create an animation etc but not ideal for a UI design project as I see it. And as I said you can export a video of that animation in XD and import it back to your UI design also.


By @Tom23569230ym17

 

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
community guidelines
Adobe Community Professional ,
Mar 21, 2022 Mar 21, 2022

Copy link to clipboard

Copied

LATEST

Hi @Tom23569230ym17, finally I did a tutorial/quick tip video as we talked, wanted to share 🙂 https://www.youtube.com/watch?v=IfCS_TxQ2Ws

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
community guidelines