Skip to main content
T
Tom23569230ym17
Participant
March 13, 2022
Answered

How to Create an endless background scroll animation in XD?

  • March 13, 2022
  • 1 reply
  • 7223 views

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>

Correct answer AkinGn

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!


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! 

1 reply

AkinGn
Community Expert
AkinGnCommunity Expert
Community Expert
March 14, 2022

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 🙂

    T
    Tom23569230ym17Author
    Participant
    March 14, 2022

    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
    Community Expert
    AkinGnCommunity Expert
    Community Expert
    March 14, 2022

    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

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices