Jump to content
Bobby Ballard

Importing CustomEase.js

Recommended Posts

I am attempting to make use of CustomEase. I get an that CodeEase is undefined. The link is good because in VSCode a Ctrl+Click opens the file. I am linking as a src of a <script> tag. Any advice greatly appreciated!

Share this post


Link to post
Share on other sites

Hm, I wonder if there's a typo in your code? You mentioned "CodeEase" but did you mean "CustomEase"? It's very difficult to troubleshoot blind - perhaps you could provide a reduced test case in codepen? 

Share this post


Link to post
Share on other sites

"CodeEase" was a "senior moment." 8-))  Sorry. The link is this:

Quote
<script src="/includes/CustomEase.js"></script>

And the I consume the library as:

Quote
CustomEase.create("nervous", "M0,0 C0,0 0.019,-0.042 0.039,-0.042 ... 0.965,0.95 0.983,0.95 1,1 1,1");

(Ellipse (...) to shorten sample.) This is the line where things circle the drain.

 

Thanks very much for your help.

 

Regards,

Bobby 

Share this post


Link to post
Share on other sites

I don't notice any obvious issues in the code. But again, it's really difficult to troubleshoot blind. 

 

If you still need some help, please provide a reduced test case that reproduces the problem and we'd be happy to take a peek. I wonder if maybe you're using the wrong kind of file, like the ES Module instead of the minified ES5 one. 

Share this post


Link to post
Share on other sites

This is the <head> of my project. The <body> contains an <svg> block.

Quote
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale-1.0"/>
        <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
        <link rel="stylesheet" href="css/app.css"/>
        <title>Bobby Ballard</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js"></script>
        <script src="/includes/CustomEase.js"></script>
        <script>
            function mainDivClick() {
                window.location.assign("bswd.html");
            }
            function runAnimation() {
                CustomEase.create("nervous", "M0,0 C0,0 0.019,-0.042 0.039,-0.042 0.054,-0.042 0.069,0 0.076,0 0.077,0.016 0.077,0.066 0.078,0.083 0.085,0.083 0.101,0.042 0.117,0.042 0.131,0.042 0.145,0.083 0.153,0.083 0.153,0.1 0.154,0.149 0.155,0.166 0.162,0.166 0.178,0.12 0.193,0.12 0.207,0.12 0.222,0.166 0.23,0.166 0.23,0.183 0.231,0.233 0.231,0.25 0.237,0.25 0.25,0.202 0.263,0.202 0.28,0.202 0.297,0.25 0.306,0.25 0.307,0.266 0.307,0.316 0.308,0.333 0.315,0.333 0.331,0.278 0.347,0.278 0.361,0.278 0.375,0.333 0.383,0.333 0.383,0.35 0.384,0.399 0.385,0.416 0.392,0.416 0.406,0.36 0.421,0.36 0.436,0.36 0.451,0.416 0.46,0.416 0.46,0.433 0.461,0.483 0.461,0.5 0.468,0.5 0.482,0.448 0.497,0.448 0.513,0.448 0.529,0.5 0.538,0.5 0.538,0.516 0.539,0.566 0.54,0.583 0.546,0.583 0.559,0.534 0.573,0.534 0.589,0.534 0.606,0.583 0.615,0.583 0.615,0.6 0.616,0.649 0.616,0.666 0.622,0.666 0.634,0.608 0.647,0.608 0.664,0.608 0.682,0.666 0.691,0.666 0.691,0.673 0.692,0.74 0.693,0.75 0.7,0.75 0.716,0.704 0.731,0.704 0.746,0.704 0.76,0.75 0.768,0.75 0.768,0.766 0.769,0.816 0.77,0.833 0.777,0.833 0.792,0.778 0.807,0.778 0.822,0.778 0.837,0.833 0.845,0.833 0.845,0.85 0.846,0.899 0.846,0.916 0.853,0.916 0.869,0.864 0.885,0.864 0.899,0.864 0.913,0.916 0.921,0.916 0.922,0.933 0.922,1.043 0.923,1.06 0.93,1.06 0.948,0.95 0.965,0.95 0.983,0.95 1,1 1,1");
                var myCapB = document.getElementById("b1Path");
                TweenMax.from(myCapB, 3, {y:-550, ease:"nervous"});
                var myLowB = document.getElementById("b2Path");
                TweenMax.from(myLowB, 3, {y:-550, delay:1, ease:Bounce.easeOut});
                var my6 = document.getElementById("n6Path");
                TweenMax.from(my6, 3, {x:-1550, delay:1, rotation:"360_ccw"});
                var my9 = document.getElementById("n9Path");
                TweenMax.from(my9, 3, {y:-1500, delay:1, rotation:"360_cw"});
                var svgDoc = document.getElementById("svgDoc");
                TweenMax.from(svgDoc, 3, {opacity:0});
                var myNotice = document.getElementById("notice");
                TweenMax.from(myNotice, 2, {delay:3, opacity:1});
            }
        </script>
    </head>
 

 

Share this post


Link to post
Share on other sites

Hm, this isn't terribly helpful - we need to actually see it in context. An excerpt of code just in the <head> doesn't do it. For example, are you using the ES Module CustomEase.js file or the ES5 one? Is there a reason you're not using the minified one? 

 

Also, I definitely wouldn't recommend putting your JavaScript code in the <head> because the browser processes things from top to bottom, so none of the actual elements that you're trying to animate will even exist yet when that code executes. See what I mean? I'd recommend putting it at the end of the <body> tag. 

 

If you still need some help, please provide a reduced test case (ideally in codepen). If you're not sure how, see: 

 

  • Like 1

Share this post


Link to post
Share on other sites

Thanks for your reply and help.

 

I created a CodePen which, of course, runs fine. When I take that same code and replace this link:

Quote

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase.min.js"></script>

with

Quote
<script src="includes/CustomEase.js"></script>

 

it does not run. The only variable here, it seems, is the CustomEase code base I downloaded and the link to a different code base online. Everything else is constant.

 

Thanks again for your help.

Regards,

Bobby

Share this post


Link to post
Share on other sites

Is the path to your local file accurate? Are you maybe using the wrong file (ES module instead of ES5)? Is there a reason you're not using the minified file (CustomEase.min.js)? 

Share this post


Link to post
Share on other sites

"Is the path to your local file accurate?"

 

Yes. Tested.

 

" ES module instead of ES5 [?]

 

I only know one file. The single, solidary link provided by GS. Can you explain the diff and how to use each and when and why?

 

" Is there a reason you're not using the minified file (CustomEase.min.js)?  "

 

There is only one download from your site. I don't have access to CustomEase.min.js and would not know where to find it!?? The download is named :

Quote
<script src="includes/CustomEase.js"></script>

 

The sub-dir is on my system and it is valid and proven.

 

Can I suggest the we focus on the only delta; linked code vs downloaded code which have different names evidenced by questions concerning file names and "minified" etc. I was not provided a choice of "minified" and not. I have only one file provided by GSAP. That is the starting point for solving the issue.

 

Can you provide me a link to the minified (possibly working) version of CustomEase??

 

Many thanks,

Bobby

 

Share this post


Link to post
Share on other sites

There are 3 CustomEase files in the download:

bonus-files-for-npm-users/CustomEase.js //ES Module, typically for use with modern bundlers
src/uncompressed/easing/CustomEase.js //standard ES5 file, useful for troubleshooting and older bundlers
src/minified/easing/CustomEase.min.js //compressed file, for use directly in the browser. 

 

For your situation, I recommend the last one. 

  • Like 1

Share this post


Link to post
Share on other sites

Thank you very much!!  It's working. I was using the npm ES Module. I assume I should use the .min.js version of each of the plugins? Thank you again.

My best,

Bobby

Share this post


Link to post
Share on other sites

Glad you got it working!

 

3 minutes ago, Bobby Ballard said:

. I assume I should use the .min.js version of each of the plugins?

 

If you're loading them directly into the browser (via a <script> tag), yes. 

 

Happy tweening!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.