0

I'm looking to add a mouseover event to an SVG that was exported from After Effects. I'd like the SVG to play on mouseover. So far, I've played around with the animation-play-state attribute but it hasn't worked. I've also tried using onmouseover in the script and tried adding an event listener for the mouseover, but still nothing. What am I doing wrong?

var params = {
    container: document.getElementById('bodymovin'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    animationData: animationData

};

var anim;

anim = bodymovin.loadAnimation(params);
Zach Saucier
  • 24,871
  • 12
  • 85
  • 147

1 Answers1

1

I do it like this and it works for me:

animContainer = document.getElementById('bodymovin');

var params = {
    container: animContainer,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    autoplay:false,
    autoloadSegments: false,
    path: 'data.json'// path to your data.json file you rendered from AE

};

var anim;

anim = bodymovin.loadAnimation(params);
animContainer.addEventListener("mouseover", myScript);

function myScript(){
    anim.play();
}
Will
  • 24,082
  • 14
  • 97
  • 108