[What are good automated test suites for animation]

Yes it's proving rather difficult to find a good testing suite! I was hoping someone here would have something. I'll keep you all posted if I find anything as it can be really useful.

 

Thanks!

[What are good automated test suites for animation]

Hello,

 

So we do dev using GSAP but what automated test suites or frameworks does our QA use to test animations?

 

Thanks!

[Problem including morph svg in our solution]

1 hour ago, GreenSock said:

Yeah, that sounds like an issue with your minifier. Perhaps it doesn't support ES6 features or you're not using the UMD file(?). Like Cassie said, it's probably easiest to just use the already-minified files that we provide in our download zip. 

 

And yeah, registering the plugins is just a good habit to get into. It mainly for protecting against over-aggressive tree shaking in bundlers. 

Yeah our solution is a .net mvc old solution. It's confusing to make things work at times. Also it's using require.js so that's another layer we need to worry about. Thanks for the help!!

[Problem including morph svg in our solution]

5 hours ago, Cassie said:

It depends on your setup - If you're using the minified files they'll register themselves if they're loaded after the core GSAP file. If you're using a build tool that does tree shaking then you definitely have to register them.

Registering them doesn't hurt though so if in doubt, do in just in case.

Let us know how you get on!

It worked thanks!!

[Problem including morph svg in our solution]

1 hour ago, Cassie said:

You shouldn't need to process the GSAP files through your minifier.

I'm not sure what your project setup is like, but you can just pop the minified files (from the download available on your dashboard) on your server and then use a script tag, just like you would from the CDN.

 

Does that help?

I think it does. I'll test it out and let you know. Do you happen to know if I have to registerPlugin for the  MorphSVGPlugin? I've seen samples on codepen where they don't do it and other samples that do.

Ex

gsap.registerPlugin(ScrollTrigger, MorphSVGPlugin);

 

Thanks!

[Problem including morph svg in our solution]

Hello,

At my work we have a greensock licence. We are trying to use the morph svg plugin. Since it is paid software I read that we can't refer to a cdn and we have to include it locally. We have included it in our solution but when we are trying to build our project the minifier throws a lot of errors that start with "Implicit property name must be identifier". There are a lot of errors. How do we resolve that? I can provide more information if required.

 

Here's an example of an error we get:

 

Implicit property name must be identifier: init(target, value, tween, index, targets) {
        if (!_checkRegister() || typeof(target.cssText) === "undefined") {
            return false;
        }
        let div = target._gsProxy = target._gsProxy || _doc.createElement("div");
        this.ss = target;
        this.style = div.style;
        div.style.cssText = target.cssText;

 

Thanks!

[Lottie in GSAP with require js]

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!

[Lottie in GSAP with require js]

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!

[Lottie in GSAP with require js]

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

[Trying to play/pause video from timeline]

Hello,

I'm trying to use GSAP to play/pause a video. I saw a sample that uses the onToggle but I don't think that will give me the results I need because I might add a few items to a timeline and it seems like onToggle will only work if 1 item is on the timeline. Do you know how I can do this? I was also trying to use the .Call() method but I can't get it to work.

 

Thanks