b0dg4n

@Rodrigo damn it - that was it! I remember reading that part when looking into the docs, but simply did not realize what it was about...this makes sense now. Thanks!

so...another update - I create a brand new app with `create-react-app` and added the code from the codepen above - nothing else - same result: when running locally, all is fine, it renders and animates...once built, the svg remains hidden - visibility is not changed

I actually copied over the example from this codepen and I got the same result - the paths are not visible once the app is built

I believe this might be a bit weird, but here goes... Got a react app boilerplated with create-react-app. Got a svg with a bunch on paths that I want animated using drawsvg. Added `visibility: hidden` to all paths initially to avoid that initial flash. Then ran `TweenLite.set('#paths path', {visibility:'visible'})` after componentDidMount to make the paths visible and then `tl.fromTo('#paths path', 2, {drawSVG: '0%'}, {drawSVG: '100%', ease: Power2.easeInOut})` to animate the paths. Running this locally, works perfectly fine. However, as soon as I build and serve the app, this simply does not do anything. Inspecting the paths in the build version, you can see the `stroke-dashoffset` and `stroke-dasharray` changing, but visibility is not changed. I tried then removing `visibility: hidden` from the css and replaced it with `opacity: 0` then tried setting opacity to 1 with TweenLite.set, as well as with `autoAlpha` - exactly the same result - paths are not visible.

revisiting this - is it possible to have a button rotate the wheel 1 tick left/right? EDIT: OK, I've done this, but not sure it's the best way. So, here's my component: constructor(props) { super(props) this.state = { currentRotation: 0 } } componentDidMount() { const rotationSnap = 360 / 14 Draggable.create('#wheel', { type: 'rotation', throwProps: true, dragClickables: true, snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap, liveSnap: this.trackRotation }) } rotateLeft = () => { TweenMax.to('#wheel', 0.5, { rotation: this.state.currentRotation - (360 / 14), modifiers: { rotation: this.trackRotation } }) } rotateRight = () => { TweenMax.to('#wheel', 0.5, { rotation: this.state.currentRotation + (360 / 14), modifiers: { rotation: this.trackRotation } }) } trackRotation = (value) => { this.setState({currentRotation: value}) return value } EDIT 2: OK, the only problem I see with this is if you call the rotateLeft/Right function repeatedly, before the rotation animation ended, the endValue will be offset

perfect - that sorts it out. Thank you

@@OSUblake that looks neat - I tried to import the `ModifiersPlugin` into my react project, but it's not included in the `bonus-files-for-npm-users` folder. Can you please let me know how to get this imported?

Sure - here's a codepen with what I am trying to do. When the `TweenMax` animation is executed, the callback in `liveSnap` of the `Draggable` instance is not being called. In this case, the pen is just updating the value a the `p` tag underneath the wheel. In my project, there's a state update as the wheel spins, so a few other elements need to react to it.

Yup - that works. I've added a `liveSnap` callback to the Draggable instance to keep track of which slice of the wheel is top-most. However, after calling the TweenMax rotation, the Draggable liveSnap callback does not trigger - would it be possible to do that?

Hey, I've got a simple draggable element: Draggable.create('#wheel', { type: 'rotation', throwProps: true, dragClickables: true, snap: (endValue) => Math.round(endValue / rotationSnap) * rotationSnap } I'd like for this to rotate on init and also rotate on a button press. Is there a way to do something like `draggableElem.rotateTo(180)` ?

I upgraded to latest react build and after adding `dragClickables: true` it all works beautifully. If adding this in by default might affect other codebases, then maybe just mention about this for React users - I would be fine either way. BTW, I've been using GSAP for the past couple of days only and I must say - this has been the most reactive support I've ever encountered! Good job!

@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.

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 ?

@GreenSock @Rodrigo dropping to `16.4.2` fixed this - I guess it's something in the newer versions of react that flips this out

OK, so added these 2 lines, but it doesn't really change anything