b0dg4n

ShockinglyGreen
  • Content count

    9
  • Joined

  • Last visited

Community Reputation

4 Newbie

About b0dg4n

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. b0dg4n

    Draggable rotate API?

    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?
  2. b0dg4n

    Draggable rotate API?

    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)` ?
  3. b0dg4n

    Draggable with create-react-app

    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!
  4. @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.
  5. 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 😯
  6. b0dg4n

    Draggable with create-react-app

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

    Draggable with create-react-app

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

    Draggable with create-react-app

    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?
  9. b0dg4n

    Draggable with create-react-app

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