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
  • 7224 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!

    T
    Tom23569230ym17Author
    Participant
    March 16, 2022

    Thank you dude your time is much appreciated.


    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

     

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