1

Is it possible to jump to a specific time and start playing the animation after a text was tapped?

<!-- All working as expected -->

<h1 on="tap:anim1.restart;">Restart</h1>
<h1 on="tap:anim1.pause;">Pause</h1>
<h1 on="tap:anim1.start;">Start</h1>
<h1 on="tap:anim1.seekTo(time=3000);">Seek 3s</h1>
  

<!-- NOT working ... -->

<h1 on="tap:anim1.start(time=3000);">Start from xx</h1>
<h1 on="tap:anim1.seekTo(time=3000),anim1.start;">Start from xx</h1>
simonwidjaja
  • 549
  • 2
  • 6
  • 13

1 Answers1

0

Right after a page reload, your code

on="tap:anim1.seekTo(time=3000),anim1.start;"

works fine. Otherwise, I need to add a restart

on="tap:anim1.restart,anim1.seekTo(time=5000),anim1.start;"

I think this is a bug but at least you have a workaround. Try running the code attached below on a full page.

<!doctype html>

<html ⚡>
<head>
  <meta charset="utf-8">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <title>Hello World</title>
  <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    h1 {
        transform-origin: left;
    }
  </style>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
    <amp-animation id="anim1" layout="nodisplay">
    <script type="application/json">
    {
        "duration": "10s",
        "animations": [{
            "selector": "#title", 
            "keyframes": [
                {"transform": "scale(1)", "opacity": 0},
                {"transform": "scale(2)", "opacity": 1}
            ] 
        }]
    }
    </script>
    </amp-animation>

    <h1 style="font-family: courier;" id=title>0123456789ABCDEF</h1>
    <h1 style="font-family: courier">0123456789ABCDEF</h1>

    <!-- All working as expected -->

    <span tabindex=0 role="button" on="tap:anim1.restart;">Restart</span> |
    <span tabindex=0 role="button" on="tap:anim1.pause;">Pause</span> |
    <span tabindex=0 role="button" on="tap:anim1.start;">Start</span> |
    <span tabindex=0 role="button" on="tap:anim1.seekTo(time=3000);">Seek 3s</span> 

    <!-- NOT working ... -->
    <br/><span tabindex=0 role="button" on="tap:anim1.seekTo(time=5000),anim1.start;">Seek=5s, start (works only a fresh page reload)</span> 
    <br/><span tabindex=0 role="button" on="tap:anim1.restart,anim1.seekTo(time=5000),anim1.start;">Restart, seek=5s, start</span> 
</body>
</html>
user2468968
  • 286
  • 3
  • 9
  • Thanks. The additional initial "anim1.restart" did the trick. – simonwidjaja Feb 05 '19 at 13:13
  • Actually it is still not working properly. It starts playing after the tap when using "anim1.restart" first. But now it first jumps to the end of the timeline and then slowly (1-2s) animates to the requested time and then starts to play. I just want to jump to the requested time without any animations and start playing... Didn't expect this simple task to be so tricky... – simonwidjaja Feb 05 '19 at 13:27
  • After several tests I can say: with just one simple animation it works. With a more complex composition with multiple animations it doesn't. It's really quirky. Most of the times I see some slow animations happening before I actually see the requested time... – simonwidjaja Feb 05 '19 at 13:36