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?

9 hours ago, GreenSock said:

I'm confused. Can you provide a reduced test case in codepen that demonstrates what you're talking about? I can't imagine how/why doing a tween outside of Draggable would somehow affect liveSnap functionality when dragging. 

Sure  -  

See the Pen JawdBY by anon (@anon) on CodePen

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.

1 hour ago, GreenSock said:

Oh, sure, you can just animate it:

 

TweenMax.to("#wheel", 1, {rotation:180});

  

Is that what you mean?

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

11 minutes ago, GreenSock said:

The only other thing I can think of is maybe your local build process is applying tree shaking and dumping CSSPlugin or something (a requirement). Maybe try referencing it (and TweenLite, just to be safe) directly in a variable to prevent tree shaking from dumping it, kinda like:

import { CSSPlugin, TweenLite, Draggable } from "gsap/all";

const dependencies = [CSSPlugin, TweenLite]; 

 

Does that help at all? 

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

53 minutes ago, OSUblake said:

Works fine here.

https://codesandbox.io/s/8z3z82rvo8

 

 

I can see that - however, doing this locally, it simply does not work.

All I did was:

 - `npx create-react-app gsap-test`

 - `npm i --save gsap`

 - copy over the exact same code from sandbox and replaced whatever was in the `index.js` and `index.css` files

 - `npm start`

The div does not rotate, but I can see the log.

I made a screen recording of this exact process here - can you please check it out and tell me what am I missing?

I am trying to get a div to rotate on drag using the Draggable api in a fresh create-react-appinstallation.

I cannot seem to get it to rotate. Here is my App.js file:

import React, { Component } from 'react';
import { Draggable } from 'gsap/all'

class App extends Component {
  componentDidMount() {
    Draggable.create('.draggable', {
      type: 'rotation',
      onPress: function() {
    	console.log('clicked');
      },
    });
  }

  render() {
    return (
      <div>
        <h2>React & GSAP Draggable</h2>
        <div className='draggable'>Drag and rotate me</div>
      </div>
    );
  }
}

export default App;

When I press the div, I can see the clicked log to console, but the div stays put when dragging.

TweenMax works fine:

TweenMax.to(target, 3, {
  color: 'red',
})