Анимация контура / обводки не работает на мобильных устройствах (After Effects,Bodymovin,Lottie,Json)
Анимация, которую я экспортировал из AE с помощью Bodymovin и Lottie, не работает на мобильных устройствах. В документации Лотти есть ссылки на несколько примеров кода, которые работают на моем мобильном телефоне Android.
Я провел хорошую пару дней, пытаясь исправить это сейчас. моя анимация тоже не работает на codepen:
https://codepen.io/michal-michalski/pen/daedvX
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="d0">
<animate id="d01"></animate>
<!--<a href=""><img src="images/mmgf.gif" alt=""></a>
<video width="380px" height="80" muted autoplay="autoplay">
<source src="MM.mp4" type="video/mp4"></video>-->
</div>
<div id="d1"><p id="t">Hire Me while I learn JS frameworks!!!
<br> from as little as:
<br><span style="color: red; font-size:24px;">£100/ day or £18k perm</span></p></div>
<div id="d2"><p>Need projects to help fill this space, get in touch if there is something u need done. great value for money :) <br>websites from <span style="color: red; font-size:24;">£100</span></></p></div>
<div id="d3"><p>CVs</p></div>
<div id="d4"><p>CONTACT</p></div>
<!-- ... -->
</body>
<footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.4.3/lottie_html.js"></script>
<script src="parasc.js"></script>
<script src="data3.json"></script>
</footer>
</html>
Смотрите анимацию по фактическому URL - http://www.mmichalski.co.uk/ отлично работает на Chrome и Firefox
Есть идеи?
Вот ссылка на JSON: http://www.mmichalski.co.uk/data3.json