Jump to content
GreenSock

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

Trying to import ThrowPropsPlugin in create-react-app

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

Hey there,

 

I am trying to import the `ThrowProps` plugin from the bonus zip.

In my file I need the plugin, I am importing this:

 

import Draggable from 'gsap/Draggable'
import '../assets/throwProps'

 

then further down:

 

componentDidMount() {
  const rotationSnap = 360 / 14
  Draggable.create('#wheel', {
    type: 'rotation',
    throwProps: true,
    snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap
  })
}

 

The wheel turns on drag, but there is not snap or inertia.

 

Running this just like this I get the following error in terminal:

 

Failed to compile../src/assets/throwProps.js
Line 13:  'define' is not defined  no-undef 

 

After adding `/* eslint-disable */` to the top of the plugin to stop it from complaining, I get this error:

 

Failed to compile../src/assets/throwProps.js
Module not found: Can't resolve '../TweenLite.min.js' in '.../src/assets'  

 

I then added this line at the top:

import TweenLite from 'gsap/all'

 

and changed 

require("../TweenLite.min.js")

to

require(TweenLite)

 

 

After all this, the warning I get is this one:

 

Compiled with warnings../src/assets/throwProps.js
.250:54-72 Critical dependency: the request of a dependency is an expression

 

Anyway, nowhere during this process did I manage to get the wheel to turn with inertia.

 

I am fully aware I am either missing something or doing something wrong, but can't figure out what it is.

Help ?

Link to comment
Share on other sites

First of all, welcome to the forums @b0dg4n! And thanks for joining Club GreenSock! Sorry to hear about the trouble.

 

It sounds like you're using the wrong files (UMD rather than ES modules). The simplest solution is probably to "npm install gsap --save-dev" for the main/public stuff, and then for the bonus plugins make sure you're using the files in the "bonus-files-for-npm-users" folder of the zip. Those are ES Modules (well, there's also a /umd/ subfolder if you NEED that format). 

 

If your build process involves tree shaking, you may also need to reference ThrowPropsPlugin somewhere in your own code just so that Webpack doesn't dump it inadvertently, like:

import ThrowPropsPlugin from "../src/gsap-bonus/ThrowPropsPlugin.js"; 

const plugin = ThrowPropsPlugin; //just to keep tree shaking from dumping it. 

 

That assumes you put the bonus files in a src/gsap-bonus/ directory of course (doesn't really matter what you name it...just put whatever path you want there for your particular setup). 

 

See https://greensock.com/docs/NPMUsage

 

Does that help? 

 

If you're still having trouble, please provide a reduced test case on stackblitz or codepen or something like that so we can see what's going on. Feel free to private message me with details so that you're not posting the actual bonus plugins somewhere public. I'm sure we can help get things squared away for you. 

  • Like 4
Link to comment
Share on other sites

@GreenSock that's amazing - all good now!

 

Thanks so much for this! It works just fine right now.

 

The only thing I could suggest is maybe add a reference to the NPM usage on the plugin page, for other ones that might be in my position.

  • Like 2
Link to comment
Share on other sites

Hey @b0dg4n, actually the docs currently have a specific part for NPM usage that also covers how to include bonus GreenSock club's plugins:

 

https://greensock.com/docs/NPMUsage

 

Around the middle of the page is mentioned how to include the bonus plugins and tools.

 

Happy Tweening!!!

  • 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.
×