player controls about lottie-web HOT 15 CLOSED

@berendvaneerde Hi. I think the loadAnimation method might work for you.
you pass an object with the necessary params (look on the readme file for all the possible configurations). You can set the autoplay and loop flags to false on your case.
It returns an animation instance you can control and call the play, stop, pause, gotoAndStop and other methods on it.
I will update the documentation to reflect this.

from lottie-web.

Thank you for your quick response.
I tried the loadAnimation method before, but no succes. I am not sure how to load the json file in animationData param: do I just route to it?
like: {animationData: JSON.parse('../animations/logo_reveal/data.json')}

from lottie-web.

@berendvaneerde Instead of using animationData, use path and pass the json path.
something like:
bodymovin.loadAnimation({
wrapper: element, // the dom element
animType: 'svg',
loop: true,
autoplay: true,
path: '../animatoins/logo_reveal/data.json'
});

It's not on the documentation either :/
I'll update it.

from lottie-web.

Thanks for your help. Getting further

Still no luck though: I get the following error

Uncaught TypeError: this.animationItem.wrapper.appendChild is not a function
SVGRenderer.configAnimation @ bodymovin.js?ver=4.2.5:2
AnimationItem.configAnimation @ bodymovin.js?ver=4.2.5:4
AnimationItem.setParams.r.onreadystatechange @ bodymovin.js?ver=4.2.5:4

from lottie-web.

@berendvaneerde what did you pass as wrapper? you need to pass a dom element.

from lottie-web.

as following

var logoReveal = $('#logoreveal'); //corresponding to a dom element in my html

bodymovin.loadAnimation({
  wrapper: logoReveal, // the dom element
  animType: 'svg',
  loop: false,
  autoplay: true,
  path: 'wp-content/themes/botoboto/library/animations/logo_reveal/data.json'
});

from lottie-web.

GOT IT! appears that my jquery doesn't work... Does it need to be pure javascript?

from lottie-web.

@berendvaneerde nice!
yes, for the moment it only supports pure javascript.

from lottie-web.

aha! So how about calling bodymovin.play('name') inside a jquery function?
Is that the reason why that is not working?

from lottie-web.

@berendvaneerde no, I think that might be another issue. If you have a working example, I'll take a look.

from lottie-web.

I'm on the right track now! Thanks to your hint on the gotoAndStop method. Logical to reset the animation to a starting point, before you can play it again, but I never saw that method before your post ;) I've got a mouseover working now. Is there also a method to give the animation another frame at load or so?

Perhaps I just need to dive into the code more, but your plugin definitely deserves some more documentation on these methods as well! All in time of course :) Thanks very much for your help. I feel like I can go to bed now with this little victory!

from lottie-web.

@berendvaneerde what do you mean by giving another frame at load? to display another frame by default on load?
I'm glad it works :)

from lottie-web.

yes! That's what I mean

from lottie-web.

@berendvaneerde no it doesn't but it makes sense. I'll add it to my todo list

from lottie-web.

Great! Thanks again...

from lottie-web.