Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation runs only once

See original GitHub issue

My intention is to make the animation run once, every time you click on a link. I did this with the code below.

call animation <a id="mylostpass" class="log01-link" title="I am lost my pass" href="#log01">I am lost my pass</a>

animation <div style="width:60%; margin: auto;" class="bodymovin" data-bm-path="site/PASSWORD.json" data-bm-renderer="svg" data-bm-loop="false" data-bm-autoplay="false" data-name="lostpass"></div>

Script <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('#mylostpass').click(function(){ bodymovin.play('lostpass'); }); }); </script>

However, by clicking a second time on the link, show the animation stopped and does not restart nor play it again. Any suggestion?

Issue Analytics

State:
Created 6 years ago
Comments:7

Top GitHub Comments

6reactions

Jeremy-Knudsencommented, Nov 17, 2017

A couple things:

jQuery(document).ready is not the same as waiting for the animation to load using the method provided in Bodymovin. For example: anim.addEventListener('DOMLoaded', function(){anim.goToAndPlay(1,true)}). This is important.
Try using goToAndPlay instead of play

1reaction

bodymovincommented, Oct 18, 2018

@aung-barto can you share a link with the implementation?

Top Results From Across the Web

Run CSS3 animation only once (at page loading)

The animation-iteration-count: 1; is internally saved in the animation shothand attribute, which gets resetted and overwritten on :hover . When ...

Play CSS Animation Only Once Per Website Visit - Karina Baha

We've added an “animated” class to this <h1> element. The elements with that class will be animated, according to the rules we'll set...

CSS : Run CSS3 animation only once (at page loading)

CSS : Run CSS3 animation only once (at page loading) [ Beautify Your Computer : https://www.hows.tech/p/recommended.html ] CSS : Run CSS3 ...

animation-iteration-count - CSS: Cascading Style Sheets | MDN

The animation-iteration-count CSS property sets the number of times an animation sequence should be played before stopping.

CSS animation-iteration-count Property - W3Schools

The animation-iteration-count property specifies the number of times an animation should be played. Default value: 1. Inherited: no. Animatable: no. Read about ...