Website ClickDummy mit AE Animationen

[friedaundihrbachelor]

Hallole 🙂

ich habe eine Frage zu XD und integrierten AfterEffects Animationen.

Und zwar: ich mache eine Website (bzw. eben nur einen Clickdummy) die nach links und rechts scrollbar sein soll und wie ein langer Comic aufgebaut ist. Bei Click oder Hover über verschiedene Elemente, erscheint Info in Form von Text. 

Nun hätte ich aber auch gern kleine Animationen drin, wie etwa krabbelnde Insekten, eine sich bewegende Pappfigur etc. 

Diese kann ich per Export in After Effects in mein XD Projekt einarbeiten soweit ich weiß. Aber durch den Export habe ich ja dann nur einen Film von meinem Clickdummy mitsamt Animationen richtig? Oder kann ich die integrierten Animationen bzw. das ganze Projekt wiederum in XD weiterbearbeiten bzw. eben als scrollbare Website Mockup exportieren? Und evtl. in XD die AE Animationen timen, sodass sie zb. erst beim reinscrollen beginnen? 

Ich würde mich mega über eine Einschätzung bzw. Anwendungstipps freuen! Sprengen meine "Wünsche" die Funktionen von XD und ich müsste mir jemanden suchen der tatsächlich Websiten programmieren kann? (please say no :D) 

Liebe Grüße,

Johanne

[Atul_Saini]

HI Johanne,

Thank you for reaching out, and sorry for the delay in response. 
I am sure the product of your imagination will be great. Now, here is what you can do to make it happen. 

1- You need a horizontal scroll. 

This can be achieved by using scroll groups. Here is more information about it - https://helpx.adobe.com/xd/help/create-scroll-groups.html.

2. You need small animations to appear while scrolling. 

You can achieve this by using Lottie animation with a hover state or play automatically mode on loop. More info on this is available here- https://helpx.adobe.com/xd/help/work-with-lottie-animations.html.

Here is the sample - https://xd.adobe.com/view/7b5b22a7-e9f2-4ed8-9b8d-3f7bd851ad4e-2e08/. Please excuse my creativity. 😉  

You may find Lottie files here- https://lottiefiles.com/featured. If you don't get desired Lottie animation, feel free to export it from After Effects.

I hope this helps. You may update this discussion if you need further assistance. 

Have a great day!

Thanks,

Atul_Saini