How to Create an endless background scroll animation in XD?

[Tom23569230ym17]

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>

[AkinGn]

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 🙂

[Tom23569230ym17]

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!

[AkinGn]

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

[Tom23569230ym17]

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!

[AkinGn · Accepted solution]

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! 

[Tom23569230ym17]

Thank you dude your time is much appreciated.

[Tom23569230ym17]

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:

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

[AkinGn]

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

[Patrick_HITK]

I'm getting stuck trying to use this technique for a background slideshow for a website. Unless that's the wrong approach...

[Rishabh_Tiwari]

Hi Patrick,

Thank you for reaching out. Can you share more about the workflow you're getting stuck? Please share the version of XD & OS and may be one us can try reproducing the issue and help you. @AkinGn

Thanks

Rishabh

[AkinGn]

Hi Patrick, just updating, as @Rishabh_Tiwari mentioned, if you can share more details and even a sample version of your file (removing any confidential info/content) , I can be more helpful. Happy designing!