Jump to content
Search Community

Importing CustomEase.js

Bobby Ballard test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

"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 

Link to comment
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. 

Link to comment
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>
 

 

Link to comment
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
Link to comment
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

Link to comment
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

 

Link to comment
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
  • Thanks 1
Link to comment
Share on other sites

  • 10 months later...
31 minutes ago, Black Ducas said:

What is missing?

You're not importing CustomEase :) Make sure you have GSAP installed via the tarball that is provided in the download from GreenSock.com because CustomEase isn't included in the public downloads - it requires a free account like what you have.

 

We also highly recommend using the install helper until you get more familiar with importing GSAP correctly. You can find more info about installing the tarball on the installation page as well.

  • Like 2
Link to comment
Share on other sites

12 hours ago, ZachSaucier said:

You're not importing CustomEase :) Make sure you have GSAP installed via the tarball that is provided in the download from GreenSock.com because CustomEase isn't included in the public downloads - it requires a free account like what you have.

 

We also highly recommend using the install helper until you get more familiar with importing GSAP correctly. You can find more info about installing the tarball on the installation page as well.

Ok, installed with npm install ./gsap-bonus.tgz and it works!

In the package.json now I have "gsap": "file:gsap-bonus.tgz",

It means that now I can't update via npm update? Instead I have to re-download the zip and re-launch npm install?

Also, once installed can I delete the zip from the project folder?

 

Link to comment
Share on other sites

19 minutes ago, Black Ducas said:

In the package.json now I have "gsap": "file:gsap-bonus.tgz",

It means that now I can't update via npm update? Instead I have to re-download the zip and re-launch npm install?

 

Leave the gsap-bonus.tgz file in your project so you can do npm update for other packages. If you need to update gsap, you will need to download the new version from your gsap account, and repeat the process.

 

19 minutes ago, Black Ducas said:

Also, once installed can I delete the zip from the project folder?

 

You never needed the zip in your project. The gsap-bonus.tgz file is the only file you need. A .tgz is a gzipped file. That's what every package you download from npm is.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...