Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Using SlowMo and RoughEase as Variables

Recommended Posts

Hello everyone!


It has been way to long. I am in the process of re-creating my website from the ground up in in Visual Studio 2017, using Bootstrap.


I just purchased the Shockingly Green Membership to really start making my site shine from the beginning. My first issue, and I am sorry if it is a common one, is that a number of my statements are now erroring out at runtime. I really wish the Visual Studio compiler could find these errors during compile and before debugging, but at least we have runtime debugging ;) 


Specifically, none of my pre-defined Ease variables are working. Here is one of the variables:


var armorPlateEaseIn = SlowMo.ease.config(0.3, 0.4, false);

This worked in the GSAP v2 code that I ported from the previous site re-design, but definitely no longer works. It just errors out on me at runtime and brings the site to a stop. This is the error (WebsiteStructureAnimations.js:517 Uncaught ReferenceError: SlowMo is not defined).


If I add Gsap, like so: 


var armorPlateEaseIn = gsap.SlowMo.ease.config(0.3, 0.4, false);

I get this error: Uncaught TypeError: Cannot read property 'ease' of undefined

Here is how I am referencing the code base:


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.0.4/gsap.min.js"></script>
	<script type="module" src="~/js/GSAP Resources/CustomEase.min.js"></script>
	<script type="module" src="~/js/GSAP Resources/EasePack.min.js"></script>

I am pointing to the correct directories and I have included the Javascript files in my solution.


My guess is that I am just no longer using the correct variable declaration statement of SlowMo.ease.config? Perhaps this has changed a fair amount since V2 of Gsap or maybe I did not install my source files correctly?


Thanks ahead of time and I am really sorry, I know that this question is likely super simple but I am just trying to get my site to run again (re-working the code to fit the new standards along the way).


Happy New Year!!!

Link to post
Share on other sites

Thanks for joining Club GreenSock, @UbiAssassin!


A few things...

  1. In GSAP 3, we offer a much simpler string-based syntax, so your ease would simply look like: ease: "slow(0.3, 0.4)". See the release notes for more details about what changed. Most things are backward compatible, but you've got an issue with how you're loading things...
  2. You are mixing your <script> types. In the first one, you've got a standard <script> tag (good). But your CustomEase and EasePack have type="module" on them which is VERY different. That tells the browser to treat the files as ES Modules...but you're not loading the ES module versions of those files (bad). GSAP offers BOTH types of files, so you can use GSAP pretty much anywhere you want (in the browser, in bundlers and build tools, modules, whatever). I recommend that you just stick with the same .min.js files, but remove the type="module" from your <script> tags. 

And don't worry, GSAP 3 isn't a radical departure from GSAP 2. You'll feel right at home once you read up on some of the improvements. Everybody I've talked to loves the new/improved syntax once they use it for even a short time. Nobody wants to go back :)


Happy tweening!

  • Like 2
Link to post
Share on other sites

Oh sweet! Thanks Jack! I figured that it was something simple that I was completely overlooking. 

  • Like 1
Link to post
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.