Installing CustomBounce - I don't know what I'm doing wrong

[cgm2020]

Hi, everyone. I do not know how to install CustomBounce. I've followed the Greensock installation video guides. But I jsut can't seem to do it. I was doing fine just trying out Custom Bounce (Greensock tutorial and docs) on CodePen. I'm using WebStorm. I've no problems using Greensock via CDN. But Custom Bounce has to be installed differently (locally, I believe) but I have some information gaps. Any advice would be great.

[GreenSock]

What happens when you try? I wonder if you just forgot to register the plugins, like: 

 

gsap.registerPlugin(CustomEase, CustomBounce);

 

Remember, CustomBounce requires that CustomEase is also loaded/registered.

[cgm2020]

I see my svg ball (circ1) sitting at it's end state, but there is no animation. 
I basically copied the code from the working CodePen and just changed my variables, etc.
But I don't think I installed it CustomBounce (or Custom Ease, for that matter) correctly.
I attempted to download and copy the bonus Greensock stuff into the project... into a folder called "js/..."

I also attempted to do an NPM installation, following your recommended video tutorials. But I'm missing something.
BTW, the other animations on my page that use the cdn hookup work fine. 
Please forgive my bad dev lingo. I'm an After Effects guy attempting to do more code-based animation.
My relevant code snippet below (there are other animation on my page that I use the other plugins for)
I reposted a copy of this in the general GSAP subsequently (I didn't know how to delete this post from this forum).

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/MotionPathPlugin.min.js"></script>
<script src="js/DrawSVGPlugin.min.js"></script>
<script src="js/CustomEase.min.js"></script>
<script src="js/CustomBounce.js"></script>


<script>
    gsap.registerPlugin(CustomEase, CustomBounce);
    var tl = gsap.timeline({delay:0.2});
    gsap.set("#circ1", {y:550});

    CustomBounce.create("myBounce", {strength:0.7, endAtStart:true, squash:3});
    tl.to("#circ1", {duration: 5, y:0, ease: "myBounce"});
    tl.to("#circ1", {duration: 5, scaleY:0.3, scaleX:1.5, ease:"myBounce-squash", transformOrigin:"bottom"}, 0);

</script>

 

[ZachSaucier]

What does the developer tools console (F12) say? Are there any related errors?

[cgm2020]

x Uncaught SyntaxError: Unexpected token 'export'
x Uncaught SyntaxError: Unexpected token 'export'
x Uncaught ReferenceError: CustomBounce is not defined
    at bouncing_balls_custom.html?_ijt=96dqpbrh9atoaidl02qieuliil:317

[ZachSaucier]

1 minute ago, cgm2020 said:

Uncaught SyntaxError: Unexpected token 'export'

That means that you're including the modules version of CustomBounce but if you're loading it in a script tag like that you should use the non-module version. Use the one in the /minified directory and that error should go away  

[cgm2020]

Yes. That worked. Perfect. I linked to the minified version (I already had it in the project directory) as you suggested.

 

One day I'll have a  better grip on modules and npm, yarn, etc. but I don't think I need to go there yet. Thanks so much!

 

By the way, animating with Greensock reminds me so much of animating with After Effects' "Expressions." But I love that I can animate directly with SVG and the DOM. But that's another topic. 

 

I'm satisfied. Thanks a lot!

[ZachSaucier]

2 minutes ago, cgm2020 said:

One day I'll have a  better grip on modules and npm, yarn, etc. but I don't think I need to go there yet.

Maybe. Maybe not  Just because it's the trend doesn't mean you have to follow it.