Jump to content


"Import" issue

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

So I have a test file trying out an idea.  Want to use the Draggable scroller  In the screenshot below you will see that Draggable is undefined.C1.thumb.PNG.0da4c3e9414283e32caa0c205cceabd1.PNG


The file paths are all correct - I have checked my script tags thoroughly.  The problem seems to be due to the other two errors.  See below




This seems to be an issue with "import" as opposed to the " { "


As an aside, That last error on the list shows up in any web page i open in Chrome.  It has something to do with promises but it does not appear to be specific to ANY web page  (Google mail, CNN, etc all show that same error) and may be a problem with my browser.  At any rate, i do not think it has anything to do with the problem I'm having with GSAP.


Does anyone have any ideas?

Link to comment
Share on other sites

I see TweenLite, but I don't see the CSS plugin being loaded. I think you'll need that in order to make this work.


You could also just load TweenMax. 


Does that change anything? Happy tweening.


Link to comment
Share on other sites

It kinda sounds like you're trying to use the ES Module files in a browser that doesn't support them OR you didn't set type="module" on your <script> tag. Most people just use the regular ES5 minified files (the ones that end in .min.js) which work in ANY browser. 

Link to comment
Share on other sites

Well some things are improved but somethings - not so much.  I switched over to the minified versions as Jack suggested and that made the difference.  But I am still getting the error on ThrowPropsPlugin if I use ""text/javascript".


<div id="impress-toolbar"></div>
<div id="impress-help"></div>

<!-- impress scripts -->
<script type="text/javascript" src="..\node_modules\impress.js\js\impress.js"></script>

<!-- gsap scripts -->
<script type="text/javascript" src="..\node_modules\gsap\src\minified\TweenMax.min.js"></script>
<script type="modules" src="..\gsap-bonuses\ThrowPropsPlugin.js"></script>
<script type="text/javascript" src="..\node_modules\gsap\src\minified\utils\Draggable.min.js"></script>

<!-- my scripts -->
<script type="text/javascript" src="index.js"></script>




As you can see in the code above, I have ThrowPropsPlugin as "module".  This does not throw an error.


However, the Draggable is not working as I expected it to.  On the product page for Draggable (https://greensock.com/draggable) this line of code results in the div being both draggable and scrollable:


Draggable.create("#scroll_1", {type:"x,y", edgeResistance:0.5, throwProps:true, bounds:window});





As you can see in the screenshot, I have dragged the div to the left of it's original position and it is scrollable via the scroll bars.


When I use this exact same code on my test page i am able to drag the div around BUT there is no scrolling ability and the text is visible overflowing the div.


If I change the CSS to "overflow: scroll"  the overflow is hidden and I can scroll.  I can also drag the div around.  However, the div gets way ahead of the cursor as you drag it from one side of the window to the other.  Strange.





Link to comment
Share on other sites

OK I realized that I have a conflict between impress.js and gsap draggable.  the moluse lag was caused by impress.js and not gsap.  I have fixed that conflict and everything is now working. 


Thanks for your help!

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