Is there a way to get smoother animation?

Question

Hi, I set up a simple looping animation of a circle going around an ellipse path. The animation looks fine in ePub preview and on Publish online, but the In5 HTML version is kind of choppy as the circle goes around. Is there anything I can do differently to smooth it out?

Here's a download link to the file:

https://we.tl/t-XYLycmJlxQ

Here's a link to how it looks on Publish Online:

https://indd.adobe.com/view/a6bbd2d4-8895-4833-a4e5-bd1ad35934a5

Thanks!

Comments

I'm sorry that your animation is appearing choppy. Thank you for sending your InDesign file and a link to your Publish Online version. Would you also be able to send your html5_output folder? Sometimes the output can provide additional details that can help with troubleshooting.

---

No problem Myra, here's a link to the output folder:

https://we.tl/t-j7Rtiup4rC

Answer 1

Thank you for sending your output in addition to your InDesign file. 

First, I can see that your content was exported with in5 version 3.8.16. There have been a couple of updates since then. The current version is 3.8.18. In general, I would recommend updating to the most recent version whenever you encounter an issue to see if the newer version helps.

• https://ajarproductions.com/pages/products/in5/download.php

So I exported it with 3.8.18. The animation appears about the same as the earlier version of in5, though.

I'm going to send your files to our developer to see if they have any recommendations.

In the meantime, if you want more control over your animation and/or create more sophisticated animation, you could create it in Adobe Animate or Tumult Hype, publish an OAM file, place it (File > Place...) in your document, and export with in5.

• Adding Animation from Tumult Hype or Adobe Animate to an InDesign + in5 project

Comments

Thanks Myra! I updated and got the same result, like you did. Is it possible that this is an issue with custom motion paths generally, or maybe curved motion paths? I've never had an issue with smoothness of animation but then I've only ever worked with the linear animation presets.

Thanks again

---

Thanks for updating. :)

I'm checking with our developer to see what the issue may be and if they can recommend a fix. It could be due to the curved motion path.

I'll let you know when I get more information.

---

Our developer who handles output said that the generated animation doesn't accurately represent all the points on the desired animation path. There are not enough points and the pixels are rounded, which causes the animation to be jerky. They calculated more points and more precise translation values. The result is a much smoother animation:

from:

0% {transform:translate(0px,0px);}
4% {transform:translate(104px,-7px);}
8% {transform:translate(201px,-28px);}
11% {transform:translate(289px,-61px);}
14% {transform:translate(366px,-105px);}
17% {transform:translate(429px,-158px);}
20% {transform:translate(476px,-219px);}
23% {transform:translate(506px,-286px);}
25% {transform:translate(517px,-358px);}
28% {transform:translate(506px,-430px);}
31% {transform:translate(476px,-497px);}
33% {transform:translate(429px,-558px);}
36% {transform:translate(366px,-611px);}
40% {transform:translate(289px,-655px);}
43% {transform:translate(201px,-688px);}
46% {transform:translate(104px,-709px);}
50% {transform:translate(0px,-716px);}
54% {transform:translate(-104px,-709px);}
58% {transform:translate(-201px,-688px);}
61% {transform:translate(-289px,-655px);}
64% {transform:translate(-366px,-611px);}
67% {transform:translate(-429px,-558px);}
70% {transform:translate(-476px,-497px);}
72% {transform:translate(-506px,-430px);}
75% {transform:translate(-517px,-358px);}
78% {transform:translate(-506px,-286px);}
80% {transform:translate(-476px,-219px);}
83% {transform:translate(-429px,-158px);}
86% {transform:translate(-366px,-105px);}
89% {transform:translate(-289px,-61px);}
93% {transform:translate(-201px,-28px);}
96% {transform:translate(-104px,-7px);}
100% {transform:translate(0px,0px);}

to:

0% {transform:translate(0px,0px);}
2.5% {transform:translate(80.87661843px,-4.40757407px);}
5% {transform:translate(159.76178609px,-17.52176717px);}
7.5% {transform:translate(234.71308837px,-39.01966434px);}
10% {transform:translate(303.88497544px,-68.37191601px);}
12.5% {transform:translate(365.57420587px,-104.85577234px);}
15% {transform:translate(418.26178609px,-147.57287968px);}
17.5% {transform:translate(460.65037301px,-195.47140109px);}
20% {transform:translate(491.69621892px,-247.37191601px);}
22.5% {transform:translate(510.63487209px,-301.99646152px);}
25% {transform:translate(517px,-358px);}
27.5% {transform:translate(510.63487209px,-414.00353848px);}
30% {transform:translate(491.69621892px,-468.62808399px);}
32.5% {transform:translate(460.65037301px,-520.52859891px);}
35% {transform:translate(418.26178609px,-568.42712032px);}
37.5% {transform:translate(365.57420587px,-611.14422766px);}
40% {transform:translate(303.88497544px,-647.62808399px);}
42.5% {transform:translate(234.71308837px,-676.98033566px);}
45% {transform:translate(159.76178609px,-698.47823283px);}
47.5% {transform:translate(80.87661843px,-711.59242593px);}
50% {transform:translate(0px,-716px);}
52.5% {transform:translate(-80.87661843px,-711.59242593px);}
55% {transform:translate(-159.76178609px,-698.47823283px);}
57.5% {transform:translate(-234.71308837px,-676.98033566px);}
60% {transform:translate(-303.88497544px,-647.62808399px);}
62.5% {transform:translate(-365.57420587px,-611.14422766px);}
65% {transform:translate(-418.26178609px,-568.42712032px);}
67.5% {transform:translate(-460.65037301px,-520.52859891px);}
70% {transform:translate(-491.69621892px,-468.62808399px);}
72.5% {transform:translate(-510.63487209px,-414.00353848px);}
75% {transform:translate(-517px,-358px);}
77.5% {transform:translate(-510.63487209px,-301.99646152px);}
80% {transform:translate(-491.69621892px,-247.37191601px);}
82.5% {transform:translate(-460.65037301px,-195.47140109px);}
85% {transform:translate(-418.26178609px,-147.57287968px);}
87.5% {transform:translate(-365.57420587px,-104.85577234px);}
90% {transform:translate(-303.88497544px,-68.37191601px);}
92.5% {transform:translate(-234.71308837px,-39.01966434px);}
95% {transform:translate(-159.76178609px,-17.52176717px);}
97.5% {transform:translate(-80.87661843px,-4.40757407px);}
100% {transform:translate(0px,0px);}

Unfortunately, they don't have a general solution because the values need to be derived directly from the specific object and trajectory sizes. Their modification works only for your specific simplified example.

We're having our developer who handles export issues take a look.

Justin said that it's possible that we may not be able to support certain complex animations. 

In general, for more sophisticated animations, we would recommend creating the content in Adobe Animate or Tumult Hype, publishing an OAM file from there, placing (File > Place...) the OAM file into InDesign, and exporting with in5:

• Adding Animation from Tumult Hype or Adobe Animate to an InDesign + in5 project

---

This is so interesting, the effort is much appreciated. The more testing I do it seems like it boils down to custom motion paths that are curved. If it turns out that it's a limitation, I'm OK with that. If there are workarounds or things to avoid, that will be good to know as well.

To be honest, embedding OAM animation holds less appeal for me even if it offers more sophistication. The magic really lies in the integration of InDesign animation with the rest of the interactive features.

Anyway, many thanks for looking into this!

---

You're very welcome. :)

I'll keep you posted with any updates from our other developer.

---

Our developers have been working a on fix to make an animation much smoother. The fix is available now in in5 version 3.8.19:

• https://ajarproductions.com/pages/products/in5/download.php