Elm animation slows when embedded in div

Learn
1

Hi, I’m making a demo website for some natural simulations in Elm. The animations are fine when I did elm reactor but degrades a lot when I embed elm in a div controlled by JS. Some other reasons why the animation is slow is because I use Time.every 10 Move. However, the animation is still clunky even when I switched to Browser.Events.onAnimationFrame. This slowdown seems to exaggerate after checking out more examples which might suggest that previous elm code may still be executing but not painting. How should I cache the loaded elm script while also ensure performance? What’s the reason behind this degradation? Is there a more efficient way to do svg animation in general?

repo: https://github.com/AlienKevin/natural-simulations
website: https://alienkevin.github.io/natural-simulations/

2

It appears to be the way you have wired things up that is causing the animations to degrade.

If you were to put it all into one Elm app, your degradation problems will go away. I have hacked up a quick demo: https://github.com/phollyer/Natural-Simulations-Example-Answer.

You can switch between Basic Walker and Bouncing Ball as many times as you like, and the animations will continue to run smoothly.

I would also suggest switching from using Time.every to Browser.Events.onAnimationFrame as this stays in sync with the Browser refresh/paint rates and ‘should’ produce smoother animations.

I can’t help if you want a solution that allows you to keep things wired up as they are, maybe someone else can.

2 Likes
3

Thanks a lot for your response! The only downside with your awesome solution is I have to manually write every module into Main.elm. I will try to figure out a way to auto-generate the code. Meanwhile, I’m still curious as to why the slowdown happens if anyone has any thoughts.

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.