Skip to main content
F
friedaundihrbachelor
Participant
August 15, 2022
Question

Website ClickDummy mit AE Animationen

  • August 15, 2022
  • 1 reply
  • 213 views

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

This topic has been closed for replies.

1 reply

Atul_Saini
Community Manager
Atul_SainiCommunity Manager
Community Manager
August 20, 2022

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

 

 


 

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