Jump to content

Dylan Cristy

  • Posts

  • Joined

  • Last visited


1 Newbie
  1. Thanks @OSUblake! Yeah, for some reason when I try to use imports I get a "_gsap.TimelineLite is not a constructor" error in my animations.js file. You are right about state, I am just used to storing stuff in state, but I could just make a class property called "rotation" and store the animation there. And yes, the relative values for rotation seem to have fixed the problem. As far as the behavior, I am already using the onPress to stop the animation (indirectly*), but I don't want it to start up automatically on onRelease, it should only start up if the user clicks/touches a different band to pause that animation. So in my demo, when it loads, all three bands are animated and rotating, but once you start interacting with it, only two bands will ever be animated, whichever one you last touched will be draggable (and standing still, if you are not actively dragging it). * The onPress invokes a function on a parent component (that was passed down through props) to set the state of the parent component, which is keeping track of "which is the currently paused band?". That information is also passed down to all the bands via props, and they use that to know if they should be paused or not.
  2. I am working on some concentric circles that should rotate infinitely, until a user clicks on one of them, in which case it should stop the animated rotation and be draggable (rotation). Then, if a different circle is clicked, the new one should stop it's animation, but the previous one should start up again from the position where the user left it after dragging, but with it's original direction and speed. I have managed to get the pausing/unpausing behavior working correctly, except for the fact that if the user drags a band a lot (say, rotating it around fully 2 or 3 times in the same direction), when the animation restarts, it's either going the wrong speed, or the wrong direction, or both. The animation is this: export const bandRotation = (element, rotateDir, rotateSpeed) => { const rotateDeg = rotateDir === "right" ? 360 : -360; const tl = new TimelineLite(); tl.to(element, rotateSpeed, { transformOrigin: "50% 50%", rotation: rotateDeg, repeat: -1, ease: Linear.easeNone }); return tl; }; I've tried a couple different ways of stopping and starting it: if (this.props.paused) { this.state.rotation.kill(); } else { this.setState({ rotation: bandRotation(this.band, this.props.direction, this.props.speed) }); } and: if (this.props.paused) { this.state.rotation.pause(); } else { this.state.rotation.invalidate(); this.state.rotation.restart(); } both of which I would think would restart the animation normally, but again, it's either going the wrong speed, wrong direction, or both. What can I do to ensure the animation restarts with the same speed and direction, no matter how the user drags the circle/band while the animation is paused?
  3. Aha! Thanks @PointC, that did the trick. Now I just need to figure out why that breaks the un-pausing/restarting of the rotation animation...
  4. I am trying to set up some concentric circles that are draggable/rotatable, and I'm trying to set it up on <g> tags because there are going to be some smaller SVGs that need to rotate around as if they were attached to the large color bands. I read the pinned SVG gotchas thread, and although it doesn't mention <g> tags, it's clear that it should work because it works here: Some notes about my codesandbox demo: I had some issues trying to use TweenLite by including gsap as a dependency and using a regular import, so I commented out the imports and added CDN links to TweenMax and Draggable in index.html. Clearly Draggable is loaded and works because I also made an extra draggable div just to make sure. The ultimate behavior I am looking to get is that the concentric bands should be rotating infinitely. If a user clicks on one of the bands, the rotation stops and the band becomes draggable. Once the user clicks on a different band, the rotation starts up again. There are two sections of code that are commented out right now, but if you uncomment them you will see the rotation animation/pausing behavior working. The part that's eluding me is the draggability. All the important stuff is happening in the BaseBand.jsx file. Any pointers on how to get draggable rotation working on an SVG <g> tag would be very welcome.