Jump to content
GreenSock

b0dg4n

Members
  • Posts

    17
  • Joined

  • Last visited

Posts posted by b0dg4n

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

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

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

     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.

  4. 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?

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

  6. 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!

    • Like 2
  7. 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 ?

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

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

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