Search code examples
lottiebodymovin

Are there Tags that could solve this?


New to coding, trying to see what/if Tags would make this code work

So I'm a beginner with basic understanding and more of a Graphics/ Designer than code based. I found a codepen by WEDOO that has exactly what I need and want to try to just swap my "animationData" to see if I can get it to work and then modify it as needed for my test (will be assign the button code to various objects for the SVG). I Can't seem to find the right "Tags" or determine if its referencing an external script...I'd image it just needs the right information to function...is that correct?

Thanks in advance!

var animation = bodymovin.loadAnimation({
  container: targetAnim,
  path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/914929/data-testo4.json...

My output from BodyMovin in a JSON file:

var animationData = 
  {"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...

Does it make sense to think that I need replace the var animation with info that should be the targetAnim with the code in the JSON file? So far put the var animationData breaks things and does nothing (visually).


Solution

  • The bodymovin.loadAnimation can be passed either a URL to a Bodymovin JSON via the path option OR you can pass the animation JSON inline by setting the animationData option instead.

    In you case it would end up looking something like:

    var animation = bodymovin.loadAnimation({
      container: targetAnim,
      animationData = {"v":"5.4.2","fr":29.9700012207031,"ip":0,"op":149.000006068894...
    ...
    })