0

I'm newbie. I got a code which is working well, but how can I make it playable while mouseover and stopable when mouseout in JavaScript(jQuery). Also I want that when we'll mouseover again an animation start from start. I added a couple lines such as: 

$('document').ready(function()
$('#bodymovin').hover(function()

to make hover effect, but animation is still playing when mouseover and also isn't showing my <div> until I mouseover at the start (that's not good :( ). It would be great if you'll write comments near a lines of code. Thank you.

<script>

$('document').ready(function() {

    $('#bodymovin').hover(function() {

        var anim;
        var animData = {
            container: document.getElementById('bodymovin'),
            renderer: 'svg',
            loop: false,
            autoplay: true,
            rendererSettings: {
            progressiveLoad:false
            },
            path: 'data.json'
        };

        anim = bodymovin.loadAnimation(animData);

    });
});

</script>
Mr Lister
  • 45,515
  • 15
  • 108
  • 150
Tai Raise
  • 9
  • 2
  • 2
    What type of animation are you looking for? This might be something you can achieve with CSS? – Chris Jan 14 '17 at 22:22
  • I already figured out how to make it, but now I'm trying to figure out how to make reverse play after .stop. Maybe you have any ideas? Why am I doing this? Well, I don't like how animation breaks after mouseleave. I want to make it smooth and user-friendly. Here is my code: `animContainer.addEventListener("mouseenter", myScript1); animContainer.addEventListener("mouseleave", myScript2); function myScript1(){ anim.play(); } function myScript2(){ anim.stop(); }` Just put that code after 'anim = bodymovin.loadAnimation(animData)' – Tai Raise Jan 14 '17 at 23:50

0 Answers0