Lottie in GSAP with require js

[Mister Cheesecake]

Hello,

 

Here is the sample I am using (based on Chris Gannon's codepen):

 

let playhead = {frame: 0},

    animation = lottie.loadAnimation({

      container: document.querySelector(".lottie"),

      renderer: "svg",

      loop: false,

      autoplay: false,

      path: "https://assets.codepen.io/35984/tapered_hello.json"

      //path: "https://assets10.lottiefiles.com/packages/lf20_syirmiva.json"

    });

 

It works on the codepen but when I bring it into our actual production code I can't get it working with require.js

 

This is the error in the console

 

ReferenceError: lottie is not defined

 

As a test I pulled the js file locally and I put an alert on the first line and it does get invoked but I don't have access to lottie.loadAnimation(). Also lottie is undefined.

 

 

PS

I'm not the greatest in JS so this is what I was able to come up with. If there's anything let me know and I'll add it.

 

Thanks!

See the Pen KKQWyML by Mokopolo (@Mokopolo) on CodePen

[Cassie]

Hey there -  sounds like you might need to include the Lottie scripts?

[Mister Cheesecake]

Hello,

 

I do include the lottie scripts. But for some reason I cannot get it to work with require.js. For example:

 

let playhead = {frame: 0},

    animation = lottie.loadAnimation({

      container: document.querySelector(".lottie"),

      renderer: "svg",

      loop: false,

      autoplay: false,

      path: "https://assets.codepen.io/35984/tapered_hello.json"

      //path: "https://assets10.lottiefiles.com/packages/lf20_syirmiva.json"

    });

 

It does not recognize what lottie is. It says it is not defined.

 

This is how the first line of my js file looks:

 

define(["jquery", "gsap", "gsapScrollTrigger", "lottieReference"], function ($, { gsap }, { ScrollTrigger }, { lottie1 }) {

 

lottie1 is always undefined. It would be nice to type something in like lottie1.lottie.loadAnimation() or something but in all the samples that I have seen they just say to include the lottie scripts and type lottie.loadAnimation().

 

lottieReference (I know the naming is getting out of control I'm getting desperate debugging) is defined as lottieReference = "https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.12/lottie.min"; in our require js config file.

 

 

Thanks!

[GreenSock]

Hi @Mister Cheesecake. It's pretty tough for us to troubleshoot blind. This doesn't really sound like a GSAP-related question if you can't get your local environment to recognize lottie. I'm not very familiar with require.js either - perhaps this is something you should ask the require.js community/author. 

 

You said lottieReference is set to https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.12/lottie.min but don't you need a ".js" at the end? Like https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.12/lottie.min.js

[Mister Cheesecake]

Hello. Yes you are correct. I grabbed the reference from our require js config and you don't need the extensions. I thought/was hoping requirejs was big enough that maybe someone knew over here that could chime in for the win. I thank you so much for your time. If anyone knows the answer to my question feel free to comment!