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',
})